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>

＆依此类推。这比我认为的还要复杂吗？还是我公然错过了regEx的简单用法？

Answer 1

您可以使用querySelectorAll()来代替非常规语言的正则表达式。这将允许您选择类mention-inserted的所有span元素。然后，您可以使用.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）中的字符串，则可以改用DOMParser，这样您就可以使用上述方法了：

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>

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

2 个答案: