JS word replacing code isn't passing variables correctly/Chrome Extension

I wrote this code to replace words in a webpage using a google Chrome Extension.

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();
        }
    }   
}

For some reason, covid goes away when I declare the newWord variable in the replace text function, but when I enter it as a parameter it doesn't. When I tried displaying the newWord variable using an alert it flashed a bunch of random numbers. Does anyone have an explanation for this? Thank you all!

1 answer

  • answered 2020-07-05 02:53 Jesus Alfonso Pinto Delgado

    When you indicate to make console.log of the variable newWord. in the first iteration if it is covid, but in the nested iteration as you are not passing parameters to take the parameter the default parameters the function considers that the index is the variable newWord.

    array.forEach(callback(currentValue, ***index*** , arguments))
    
    function replaceText(element, ***newWord***)
    

    Interpolating your code something like this happens:

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

    That's why the numbers appear, the variable newWord acquires the value of the current index in each iteration.

    I don't fully understand what you want to do with your code, but here I made the necessary changes to make it work, I renamed the function because it seemed more semantic...

    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>