<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In <strong>facilisis</strong> risus non vehicula commodo. Donec ac pretium sapien, ut lacinia quam.</p>

<p>Integer quis finibus magna, <em>id dictum risus</em>. Sed in diam non odio bibendum consequat ut ac velit. Phasellus fringilla aliquam justo, vel feugiat massa vehicula ut. Cras ut consequat mi, ut vestibulum ipsum. Nunc enim felis, auctor at diam in, pulvinar gravida augue. Phasellus ultrices iaculis rutrum.</p>
html {
  font-family: consolas, monospace;
  font-size: 15pt;
  line-height: 1.5;

body {
  margin: 2rem 5rem;
  background: #000;
  color: #f7f7f7;

::selection {
  background-color: #f06;
  color: white;
// First let's get all text nodes in the page.
const treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
const allTextNodes = [];
let currentNode = treeWalker.nextNode();
while (currentNode) {
  // There may also be hidden text nodes in the page
  // like text inside a <script> tag. So ignore those.
  if (getComputedStyle(currentNode.parentNode).display !== 'none') {
  currentNode = treeWalker.nextNode();

// Then, loop through them, every time splitting them into
// individual words, and creating a list of words per node.
const allWords = [];
for (const textNode of allTextNodes) {
  for (const word of textNode.textContent.matchAll(/[a-zA-Z]+/g)) {
      word: word[0],
      parentNode: textNode,
      offset: word.index

// Finally, loop through the words and highlight them one by
// one by creating a Range and Selection object.
let index = 0;
const range = new Range();
setInterval(() => {
  if (index >= allWords.length) {
    index = 0;
  const {word, parentNode, offset} = allWords[index];
  range.setStart(parentNode, offset);
  range.setEnd(parentNode, offset + word.length);
}, 100);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.