CSS or JS to modify (replace) every word on webpage

Question

For an easter egg, I want to be able to replace every word on my webpage with a constant string. Existing questions focus on replacing certain words, elements that don't contain many other elements, or use libraries such as JQuery. Structure should be kept, i.e. <li>Some text <span>link</span> more text</li> should become <li>Lorem Lorem <span>Lorem</span> Lorem Lorem</li>.

If I walk the DOM like this:

recur (el) {
  if (typeof el === 'undefined') {
    el = document.body
  }
  for (let e of el.childNodes) {
    if (e.nodeType === 1) {
      recur(e)
    } else if (e.nodeType === 3) {
      console.log(e)
    }
  }
}

I get lots of #text elements and things that look like strings. How can I actually mutate them? I tried assigning to the corresponding elements in the parent array, but that doesn't work:

Uncaught TypeError: Failed to set an indexed property on 'NodeList': Index property setter is not supported.

Is it better to modify the innerHTML attribute on parent nodes of such text nodes?

Or would you recommend a different approach altogether? CSS-only solutions are also great.

If it's the same replacement string over and over, you could just count the number of words in an element and then set the nodes `innerHTML` with that many of your new word. — Chris Riebschlager, Jan 17 '18 at 22:19
Possible duplicate of [Change textNode value](https://stackoverflow.com/questions/680431/change-textnode-value) — yuriy636, Jan 17 '18 at 22:21
Chris: You mean with `innerHTML`? Yes, but what are the relevant elements? What if I have nesting à la `

Joseph Marikle · Answer 1 · 2018-01-17T22:46:52.327

4

How fun! You can get and assign to the nodeValue of a text node. regex will get you at the very least really close with /[\w\x7f-\xff]+/g (The hex values match a good portion of special characters. See here)

(function recur (el) {
  if (typeof el === 'undefined') {
    el = document.body
  }
  for (let e of el.childNodes) {
    if (e.nodeType === Node.ELEMENT_NODE) {
      recur(e)
    } else if (e.nodeType === Node.TEXT_NODE) {
      e.nodeValue = e.nodeValue.replace(/[\w\x7f-\xff]+/g, 'lorem')
    }
  }
})();

<html>
<head>
<title>
A Simple HTML Document
</title>
</head>
<body>
<p>This is a very schön HTML document</p>
<p>It only has <b>two</b> paragraphs</p>
</body>
</html>

edited Jan 17 '18 at 22:46

answered Jan 17 '18 at 22:32

Joseph Marikle

76,418
17
112
129

minor suggestion: using the Node.ELEMENT_NODE and Node.TEXT_NODE constants can make it easier to understand how this works. – Semicolon Jan 17 '18 at 22:35
Great! That solution works, I just need to fiddle with the regex a bit to include umlauts and such. – nnnmmm Jan 17 '18 at 22:37
@Semicolon A very good suggestion. For those wondering, Semicolon is referring to these constants: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType#Constants – Joseph Marikle Jan 17 '18 at 22:37
Alternatively, you can use something like `const n = e.nodeValue.split(' ').filter(str => str.trim()).length; e.nodeValue = 'Lorem '.repeat(n)` – nnnmmm Jan 17 '18 at 22:56

skyline3000 · Accepted Answer · 2018-01-18T00:34:31.237

I would highly suggest you look into using a TreeWalker, a DOM API used for exactly this purpose - traversing a DOM tree. It can find all of the text nodes in the document and it finds them very efficiently, since modern browsers run API calls like this in native code.

The first argument is the node you want to begin the search from and the second argument is the type of nodes to find. In this case, we're starting at the document.body and looking for all textNodes. Then, in a while loop, you perform whatever action you want on the node and then move on to the next one.

With this implantation, you don't have to deal with awkward inner tags or white space - all of the text gets bundled up nicely for you. And, it will be faster than anything you can write in client-side JS for tree traversal.

const matchAllExceptWhitespace = /\w+/g;
const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
const word = 'Lorem';

let node;

while (node = treeWalker.nextNode()) {
  node.textContent = node.textContent.replace(matchAllExceptWhitespace, word);
}

<h1>A paragraph</h1>
<p>This is a sentence.</p>
<ul>
    <li>Some text <span>link</span> more text</li>.
</ul>

Wouldn't it be easier to do: `let node; while (node = treeWalker.nextNode()) { node.textContent = node.textContent.replace(matchAllExceptWhitespace, word); }`? — Blue, Jan 17 '18 at 23:04
Yes, thanks, that makes it simpler, I've updated the snippet. There's also a reference to the `currentNode()` which could be used. — skyline3000, Jan 18 '18 at 00:39

Blue · Answer 3 · 2018-01-17T22:46:50.847

1

This is one of the simplest ways (Borrowed some help from this answer):

function ReplaceChildText(node, replaceText) {
    //Is this a text node?
    if (node.nodeType === 3) {
      //Simply replace the value with your regex:
      node.nodeValue = node.nodeValue.replace(/\w+/g, replaceText);
    } else {
        //Loop through all the children, to look for more text nodes
        for (let child of node.childNodes) {
            //Yay, recursion
            ReplaceChildText(child, replaceText);
        }
    }
}

ReplaceChildText(document.body, 'Loreum');

<div id="test"><li>Some text <b>link</b> more text</li></div>

edited Jan 17 '18 at 22:46

answered Jan 17 '18 at 22:40

Blue

22,608
7
62
92

There are other node types that don’t have childNodes which could be encountered, like Comment, so a check for whether it’s an Element (or whether it has childNodes) matters. – Semicolon Jan 17 '18 at 23:01
1

@Semicolon Just added a comment node, and the script still executed perfectly (childNodes simply returned 0 length) – Blue Jan 17 '18 at 23:03
Oh, good to know. I hadn’t realized that childNodes is inherited from Node. – Semicolon Jan 17 '18 at 23:37

CSS or JS to modify (replace) every word on webpage

3 Answers3