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 => {

  elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;

});

.active-link {

  color: blue;

  cursor: pointer;

}

<p>

  Here are some users you mentioned:

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

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

  <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 => {

  elem.outerHTML = `<a class="${elem.classList.value} active-link">${elem.innerHTML}</a>`;

});

const result = parsed.innerHTML; // String output/result

document.body.appendChild(parsed); // HTMLHtmlElement object output

console.log(result);

.active-link {

  color: blue;

  cursor: pointer;

}

Answer 2

我尝试使用正则表达式来突出显示 html textNode 而不是更改 html 结构，但这很复杂。所以我使用 DOM API 来实现它。

function replaceSpanWithAnchor(htmlText) {

  const node = document.createElement('div')

  node.innerHTML = htmlText

  const spans = node.querySelectorAll('span')

  for (let span of spans) {

    let a = document.createElement('a')

    a.className = "mention-inserted active-link"

    a.textContent = span.textContent

    span.replaceWith(a)

  }

  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>