分割字符串以創建HTML鏈接

Question

我正在使用一個API，該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和本地平台都可以使用該API，並且HTML遠離數據。 還有一些internalLink類型，它們使應用程序開發人員可以鏈接到應用程序中的內容，而無需打開Web瀏覽器。

我需要能夠將此字符串傳遞到函數中並返回帶有標記的完整字符串，如下所示：

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()獲取<my_link>元素的data屬性，設置動態創建的<a>元素的.innerHTML並使用.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); 

Answer 2

將字符串添加為新元素的HTML。 遍歷所有my_link元素以提取相關數據，然后構建一個新的錨，該錨可以在每次迭代后替換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);

演示

Answer 3

這是使用DOMParser()的另一種解決方案，以防您以后可能需要做更多的DOM修改。

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