JS 单词替换代码未正确传递变量/Chrome 扩展答案

【问题标题】：JS word replacing code isn't passing variables correctly/Chrome ExtensionJS 单词替换代码未正确传递变量/Chrome 扩展
【发布时间】：2020-07-05 01:43:24
【问题描述】：

我编写了这段代码来使用谷歌 Chrome 扩展替换网页中的单词。

replaceText(document.body, "covid")

function replaceText(element, newWord) {
    if(element.hasChildNodes()){
        element.childNodes.forEach(replaceText)
    }   else if (element.nodeType === Text.TEXT_NODE){
        if(element.textContent.match(newWord)){
            element.parentElement.remove();
        }
    }   
}

由于某种原因，当我在替换文本函数中声明 newWord 变量时，covid 消失了，但是当我将它作为参数输入时它却没有。当我尝试使用警报显示 newWord 变量时，它闪烁了一堆随机数。有人对此有解释吗？谢谢大家！

【问题讨论】：

标签： javascript html css google-chrome google-chrome-extension

【解决方案1】：

当您指示创建变量newWord 的console.log 时。如果它是covid，则在第一次迭代中，但在嵌套迭代中，因为您没有传递参数以获取参数默认参数，该函数认为索引是变量newWord。

array.forEach(callback(currentValue, ***index*** , arguments))

function replaceText(element, ***newWord***)

像这样插入你的代码：

function replaceText(hereBody, hereCovid) {
    if(hereBody.hasChildNodes()){
console.log(hereCovid)
        element.childNodes.forEach(replaceText(hereActualChild,hereActualChildIndex, arguments)

这就是数字出现的原因，变量newWord在每次迭代中获取当前索引的值。

我不完全理解你想用你的代码做什么，但在这里我做了必要的改变使它工作，我重命名了这个函数，因为它看起来更符合语义......

function removeText(element, index, newWord) {
    if(element.hasChildNodes()){
        element.childNodes.forEach((element, i, newword) => removeText(element, i, newWord))
    }   else if (element.nodeType === Text.TEXT_NODE){
        if(element.textContent.match(newWord)){
            element.parentElement.remove();
        }
    }   
}

#button{
border: 1px solid black;
border-radius: 5px;
width: max-content;
background-color: blue;
color: white;
padding: 5px;}

div{
border: 1px solid #e4e6e8;
}

p{
border: 1px solid green;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <p>Other p</p>
    <p>The <b>covid</b>
    </p>
    <div>
      <p>other p but different</p>
      Plain text covid
    </div>
  </div>
  <div>
    <p> the covid is an 
      <b>virus</b>
    </p>
  </div>
  <div>
    <p> text without 
      <b>virus</b>
    </p>
  </div>
  
    <div id="button" onClick='removeText(document.body,0,"covid")'>Remove text</div>
  
</body>
</html>

【讨论】：

抱歉，我在跟踪时遇到了一点问题。我该如何解决这个问题来解决我的问题？
@DanielleZevitz 添加第三个参数，并使用箭头函数指示您的参数，不要默认保留它们，编辑我的答案，希望这对您有所帮助，上一个答案只是澄清了为什么数字出现了。
css 只是为了让您可以更清楚地看到所获得的行为......请注意，尽管在 p 之后，纯文本完全消除了 div，因为这是节点根据您定义的函数，如果 html 不是按语义构建的，您应该考虑可能的结果