在元素中间添加新标签

Question

我试图用 HTML 标签包围 textContent 中的特定单词，这可以假设通过执行 element.textContent = element.textContent.replaceAll("word", "<h1>word<h1>"); 来完成，但没有被解析，element.innerHTML= element.innerHTML.replaceAll("word", "<h1>word<h1>"); 也没有工作，因为存在单词可能是标签名称的风险。除了编写一个自定义替换函数来检测标签中的时间之外，还有什么解决方案吗？

Answer 1

您可以确保要填充的词不在标记内。为此，您需要检查其周围的字符。只要它们不被两边的 < 和 > 包围（或者确保它们被左边的 <some tag> 和右边的 </?some tag> 包围，就像什么我在下面做了），它们应该是唯一被替换的。尝试下面的正则表达式示例：

function padTags(content, openTag, word, closeTag) {
  console.log(content)
  const replacement = openTag + word + closeTag;
  const regex = `(?<!<[^<>]*)${word}(?![^<>]*>)`;
  const pattern = new RegExp(regex, 'g');
  return content.replace(pattern, replacement);
}

console.log(padTags(`<p class="questions">What's your favorite class?</p>`, 
                '<custom-tag>', 'class', '</custom-tag>'));
console.log(padTags(`<div><p class="test">class</p></div>`,
                '<custom-tag>', 'class', '</custom-tag>'));
console.log(padTags(`<div> class <p data-customvar="<class>">This is my class </p>class</div>`,
                '<custom-tag>', 'class', '</custom-tag>'));

在元素中间添加新标签

Add new tag to the middle of element

html

javascript

dom