Javascript，如何正确找到文本中的模式并替换？

Question

在以下 html 文本中：

<p>Here are some users you mentioned:

    <span class="mention-inserted">@johnsmith1</span>,

    <span class="mention-inserted">@daisy_apple23</span>,

    <span class="mention-inserted">@bob.erricson</span>.

    //... some more text //

</p>

我如何找到所有的

<span class="mention-inserted">@{user}</span>

并将它们转换为<a></a>带有添加类的标签，保持它们各自的位置而不删除任何其他文本？

所以

<span class="mention-inserted">@johnsmith1</span>

应该简单地转换为

<a class="mention-inserted active-link">@johnsmith1</a>

＆ 很快。这比我相信的更复杂吗？还是我公然错过了正则表达式的简单使用？

Answer 1

与其尝试为非常规语言提出正则表达式，不如使用querySelectorAll().这将允许您选择所有具有 class 的 span 元素mention-inserted。然后，您可以使用 循环访问此集合，.forEach并使用将span元素更改为链接.outerHTML。请参见下面的示例：document.querySelectorAll('span.mention-inserted').forEach(elem => {&nbsp; elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;});.active-link {&nbsp; color: blue;&nbsp; cursor: pointer;}<p>&nbsp; Here are some users you mentioned:&nbsp; <span class="mention-inserted foo">@johnsmith1</span>,&nbsp; <span class="mention-inserted">@daisy_apple23</span>,&nbsp; <span class="mention-inserted">@bob.erricson</span></p>如果您的文本是 JS 中的字符串（而不是 HTML），您可以使用 aDOMParser代替，这将允许您使用上述方法：const str = `<p>Here are some users you mentioned: <span class="mention-inserted">@johnsmith1</span>,<span class="mention-inserted">@daisy_apple23</span>,<span class="mention-inserted">@bob.erricson</span></p>`;const parsed = new DOMParser().parseFromString(str, "text/html").body;parsed.querySelectorAll('span.mention-inserted').forEach(elem => {&nbsp; elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;});const result = parsed.innerHTML; // String output/resultdocument.body.appendChild(parsed); // HTMLHtmlElement object outputconsole.log(result);.active-link {&nbsp; color: blue;&nbsp; cursor: pointer;}

Answer 2

我尝试使用正则表达式来突出显示 html textNode 而不是更改 html 结构，但这很复杂。所以我使用 DOM API 来实现它。function replaceSpanWithAnchor(htmlText) {&nbsp; const node = document.createElement('div')&nbsp; node.innerHTML = htmlText&nbsp; const spans = node.querySelectorAll('span')&nbsp; for (let span of spans) {&nbsp; &nbsp; let a = document.createElement('a')&nbsp; &nbsp; a.className = "mention-inserted active-link"&nbsp; &nbsp; a.textContent = span.textContent&nbsp; &nbsp; span.replaceWith(a)&nbsp; }&nbsp; return node.innerHTML}console.log(replaceSpanWithAnchor('<p>Here are some users you mentioned: <span class="mention-inserted">@johnsmith1</span>,<span class="mention-inserted">@daisy_apple23</span>,<span class="mention-inserted">@bob.erricson</span>.</p>'))// <p>Here are some users you mentioned: <a class="mention-inserted active-link">@johnsmith1</a>,<a class="mention-inserted active-link">@daisy_apple23</a>,<a class="mention-inserted active-link">@bob.erricson</a>.</p>