时间戳

首页 > 解决方案 > Javascript，如何正确找到文本中的模式并替换？

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

问题描述

在以下 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>

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

标签： javascripthtmlreplace

解决方案

与其尝试为非常规语言提出正则表达式，不如使用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;
}

推荐阅读