Checking and replacing multiple strings inside a text/node Chrome Extension

Question

So I am creating a chrome extension where I replace the word school with prison (The code is written for norwegians so it says skole not school and fengsel instead of prison)

This is my current javascript code:

var elements = document.getElementsByTagName('*');

for(var i = 0; i<elements.length; i++){
var element = elements[i];

for(var j = 0; j < element.childNodes.length; j++){
    var node = element.childNodes[j];

    if(node.nodeType === 3){
        var text = node.nodeValue;
        var replacedText = text.replace(/skolenes/gi, 'fengselenes');
        var replacedText1 = text.replace(/skolene/gi, 'fengselene');
        var replacedText2 = text.replace(/skolen/gi, 'fengselet');
        var replacedText3 = text.replace(/skoler/gi, 'fengsler');
        var replacedText4 = text.replace(/skole/gi, 'fengsel');

        if(replacedText !== text){
            element.replaceChild(document.createTextNode(replacedText), node);
        }else if(replacedText1 !== text){
            element.replaceChild(document.createTextNode(replacedText1), node);
        }else if(replacedText2 !== text){
            element.replaceChild(document.createTextNode(replacedText2), node);
        }else if(replacedText3 !== text){
            element.replaceChild(document.createTextNode(replacedText3), node);
        }else if(replacedText4 !== text){
                  element.replaceChild(document.createTextNode(replacedText4), node);
              }
    }
}
}

and this is my manifest:

{
"manifest_version" : 2,
"name": "Skole er fengsel",
"description": "Endre ordet skole til fengsel",
"version": "0.0.1",
"content_scripts": [
    {
        "matches": [
            "http://*/*",
            "https://*/*"
            ],
            "js": [
                "content.js"
                ],
                "run_at": "document_end"
    }
]
}

So with this code i am able to change the sentence: Skole er bra for skolen. To: Fengsel er bra for skolen. My problem is that because i use else if i dont excecute the next if statement if the one before was excecuted, but if i take away the else if and only have if i get this error

content.js:26 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at chrome-extension://jofeghinfepefmgbllmcicjpjdbeenkg/content.js:26:31
(anonymous) @ content.js:26

My question is how to resolve this problem and make the code replace all the found words inside the node.

Answer 1

It doesn't work because in replaceChild the second parameter specifies which element that needs to be replaced. In the first if-sentence, you remove node from the DOM, so when you try to replace it the second time it fails.

Like wOxxOm suggests, you can replace it directly:

if (node.nodeType === 3) {
  node.nodeValue =
    node.nodeValue
      .replace(/skolenes/gi, 'fengselenes')
      .replace(/skolene/gi, 'fengselene')
      .replace(/skolen/gi, 'fengselet')
      .replace(/skoler/gi, 'fengsler')
      .replace(/skole/gi, 'fengsel');
}

Or, if you insist on replacing the node, you could do it like this:

if (node.nodeType === 3) {
  var text = node.nodeValue;
  var replacedText = 
    text.replace(/skolenes/gi, 'fengselenes')
        .replace(/skolene/gi, 'fengselene')
        .replace(/skolen/gi, 'fengselet')
        .replace(/skoler/gi, 'fengsler')
        .replace(/skole/gi, 'fengsel');

  if (replacedText !== text) {
    element.replaceChild(document.createTextNode(replacedText), node);
  }
}