Javascript 拆分字符串以创建HTML链接

我正在使用一个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.

另一个要考虑的是字符串可以有多个链接。

我最初的尝试是基本的，确实从第一个链接中获取了

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

导出默认函数convertLink（字符串）{
让stringWithLinks=string；
if（string.includes（“您可以将字符串设置为动态创建的元素的
.innerHTML
，并使用
.getAttribute（）
获取
元素的
数据
属性，设置动态创建的
元素的
.innerHTML
并使用
.replaceChild（）
用
元素替换


let str=`这是我在StackOverflow上提出的关于拆分字符串并将其重建为HTML链接的问题；
设div=document.createElement（“div”）；
div.innerHTML=str；
让my_links=Array.prototype.map.call（div.queryselectoral（“my_link”），link=>
link.getAttribute（“数据”）；
日志（我的链接）；
for（让我的链接的链接）{
设a=document.createElement（“a”）；
a、 href=链接；
a、 target=“_blank”；
a、 innerHTML=div.querySelector（“我的链接”）.innerHTML；
div.replaceChild（一个div.querySelector（“我的链接”））
}
console.log（div.innerHTML）；
您可以将动态创建的元素的字符串设置为
.innerHTML
，并使用
.getAttribute（）
获取
元素的
数据
属性，设置动态创建的
元素的
.innerHTML
并使用
.replaceChild（）
用
元素替换


let str=`这是我在StackOverflow上提出的关于拆分字符串并将其重建为HTML链接的问题；
设div=document.createElement（“div”）；
div.innerHTML=str；
让my_links=Array.prototype.map.call（div.queryselectoral（“my_link”），link=>
link.getAttribute（“数据”）；
日志（我的链接）；
for（让我的链接的链接）{
设a=document.createElement（“a”）；
a、 href=链接；
a、 target=“_blank”；
a、 innerHTML=div.querySelector（“我的链接”）.innerHTML；
div.replaceChild（一个div.querySelector（“我的链接”））
}
console.log（div.innerHTML）；
将字符串添加为新元素的HTML。循环所有提取相关数据的
my\u链接
元素，然后构建一个新的锚，然后在每次迭代中替换
my\u链接

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

将字符串添加为新元素的HTML。循环所有提取相关数据的
my\u链接
元素，然后构建一个新的锚，然后在每次迭代中替换
my\u链接

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

这里有另一个使用
DOMParser（）
的解决方案，以防您以后可能需要进行更多的DOM修改


let stringWithLinks=`这是我在StackOverflow上提出的关于拆分字符串并将其重建为HTML链接的问题，
tempDOM=new DOMParser（）.parseFromString（“”+stringWithLinks+“”，“text/xml”），
linkElements=tempDOM.getElementsByTagName（'my_link'）；
对于（让i=0；i这里有另一个使用
DOMParser（）
的解决方案，以防以后可能需要进行更多的DOM修改


let stringWithLinks=`这是我在StackOverflow上提出的关于拆分字符串并将其重建为HTML链接的问题，
tempDOM=new DOMParser（）.parseFromString（“”+stringWithLinks+“”，“text/xml”），
linkElements=tempDOM.getElementsByTagName（'my_link'）；
对于（让i=0；但是，我想使用这种方法与临时dom元素相比并没有什么优势——只是一个首选项。然而，我想使用这种方法与临时dom元素相比并没有什么优势——只是一个首选项。唯一缺少的是添加链接的
anchor.textContent=link.textContent；
标记之间的文本。谢谢你的示例。@Guerilladio，谢谢你指出这一点。我更新了答案/演示以反映这一变化。唯一缺少的是
anchor.textContent=link.textContent；
在标记之间添加链接文本。谢谢你的示例。@Guerilladio，谢谢你指出这一点。我更新了回答/演示以反映该变化。