javascript - 分割字符串以创建 HTML 链接

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.

这样做的原因显然是为了让 Web 和 native 平台都可以使用 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 属性的值，然后重新运行任何其他链接。

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>元素

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);