使用 javascript 审查 html 页面中的单词答案

【问题标题】：censoring words within html page using javascript使用 javascript 审查 html 页面中的单词
【发布时间】：2020-02-05 10:30:23
【问题描述】：

function DOMcensor(word) {
  let regexwordfilter = `[ ^]?${word}[ $]?`
  regexwordfilter = new RegExp(regexwordfilter,"gmi");
  console.log(regexwordfilter);
  let bodystring = document.body.innerHTML;
  bodystring = bodystring.replace(regexwordfilter,` ${"*".repeat(word.length)} `);
  document.body.innerHTML = bodystring;
}
DOMcensor("img")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src=https://www.jaipuriaschoolsbanaras.in/babatpur/wp-content/uploads/2016/11/blank-img.jpg>
<h1>img</h1>

我正在尝试创建一个函数来获取一个单词并在 html 文档中对其进行审查，但是如果单词包含在标签中，我创建的函数会导致一些问题参见代码示例它应该阻止 h1 标签内的 img 但是如果 img 标签不是名称中的 img，我如何指定我只想阻止文本而不是标签或标签的属性？

【问题讨论】：

我认为这不能只用正则表达式来完成。为此，您将需要解析器。您可以实现一个更简单的版本，在该版本中检查字符串是否不是标签名称，但要忽略属性，您需要一个解析器。

标签： javascript html

【解决方案1】：

你可以这样写一个函数：

function censorWord(el, word) { 
  if (el.children.length > 0) { 
    Array.from(el.children).forEach(function(child){ 
      censorWord(child, word) 
    }) 
  } else { 
    if (el.innerText) { 
      el.innerText = el.innerText.replace(new RegExp(`\\b${word}\\b`, "g"), "***") 
    } 
  }  
}

和

censorWord(document.body, "someWord")

【讨论】：

例如，如果我将此功能与 word phone 一起使用，它会将 phone 一词显示为 tele***，这不是我的意图，我只是想在该词自行出现时阻止它