Question

我正在使用API返回带有内联链接的字符串，如下所示：

This is a question I'm asking on <my_link type="externalLink" data="https://stackoverflow.com/">StackOverflow</my_link> about splitting a string and reconstructing as a HTML link.

显然，原因是网络和本机平台都可以使用API，并且HTML远离数据。还有internalLink种类型，允许应用开发者链接到应用内的内容，而不是打开网络浏览器。

我需要能够将此字符串传递给函数并返回带有类似标记的完整字符串：

This is a question I'm asking on <a href="https://stackoverflow.com" target="_blank">StackOverflow</a> about splitting a string and reconstructing as a HTML link.

要考虑的另一件事是字符串中可能包含多个链接。

我的初始尝试是基本的，并从第一个链接获得externalLink，但我不确定如何获取data属性的值，然后重新运行任何其他链接。< / p>

export default function convertLink(string) {
  let stringWithLinks = string;

  if (string.includes('<my_link')) {
    const typeStart = string.indexOf('"') + 1;
    const typeEnd = string.indexOf('"', typeStart);
    const typeText = string.substring(typeStart, typeEnd); // externalLink
  }

  return stringWithLinks;
}

Answer 1

您可以将字符串设置为动态创建的元素的.innerHTML，并使用.getAttribute()获取data元素的<my_link>属性，设置.innerHTML动态创建<a>元素并使用.replaceChild()将<my_link>替换为<a>元素

＆＃13;

let str = `This is a question I'm asking on <my_link type="externalLink" data="https://stackoverflow.com/">StackOverflow</my_link> about splitting a string and reconstructing as a HTML link.`;

let div = document.createElement("div");

div.innerHTML = str;

let my_links = Array.prototype.map.call(div.querySelectorAll("my_link"), link =>
                 link.getAttribute("data"));

console.log(my_links);

for (let link of my_links) {
  let a = document.createElement("a");
  a.href = link;
  a.target = "_blank";
  a.innerHTML = div.querySelector("my_link").innerHTML;
  div.replaceChild(a, div.querySelector("my_link"))
}

console.log(div.innerHTML);

＆＃13;

Answer 2

将字符串添加为新元素的HTML。循环遍历提取相关数据的所有my_link元素，然后构建一个新锚点，然后可以在每次迭代时替换function convertAllLinks(str) { let el = document.createElement('div'); el.innerHTML = str; el.querySelectorAll('my_link').forEach(link => { let anchor = document.createElement('a'); anchor.href = link.getAttribute('data'); anchor.setAttribute('target', '_blank'); anchor.textContent = link.textContent; link.parentNode.replaceChild(anchor, link); }); return el.innerHTML; } convertAllLinks(str);。

{{1}}

<强> DEMO

Answer 3

这是使用DOMParser()的另一个解决方案，以防您以后需要进行更多DOM修改。

＆＃13;

let stringWithLinks = `This is a question I'm asking on <my_link type="externalLink" data="https://stackoverflow.com/">StackOverflow</my_link> about splitting a string and reconstructing as a HTML link.`,
    tempDOM = new DOMParser().parseFromString('<doc>' + stringWithLinks + '</doc>', "text/xml"),
    linkElements = tempDOM.getElementsByTagName('my_link');

for (let i=0; i<linkElements.length; i++) {
  let newA = document.createElement('a');
  newA.setAttribute('src', linkElements[i].getAttribute('data'));
  
  let linkType = linkElements[i].getAttribute('type');
  if (linkType == 'externalLink') {
    newA.setAttribute('target', '_blank');
  }
  newA.innerHTML = linkElements[i].innerHTML;
  
  tempDOM.documentElement.replaceChild(newA, linkElements[i]);
}

console.log(tempDOM.documentElement.innerHTML);

＆＃13;

拆分字符串以创建HTML链接

3 个答案: