JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/349738

by Julien Etienne

HTML

<div id="target">
  <h1>タイトルABCが入ります</h1>
  <p class="test">リードABCが123入ります</p>
  <p>リードABCが123入ります</p>
  <p data-thing="123">リードABCが123入ります</p>
  <p>リードが123入ります</p>
  <p>455</p>
  <p>リードABCが123入ります</p>
</div>

CSS

.alphabet {
    font-size: 102%;
    font-weight: bolder;
}

JavaScript

const nodeIterator = document.createNodeIterator(
  document.getElementById('target'),
  NodeFilter.SHOW_TEXT, {
    acceptNode(node) {
      console.log(node)
      return node.wholeText === '455'
    }
  }
);
while (currentNode = nodeIterator.nextNode()) {
  const template = document.createElement('template')
  template.innerHTML = currentNode.nodeValue.replace(/(\w+)/g, '<span class="alphabet">$1</span>');
  currentNode.parentElement.insertBefore(template.content, currentNode);
  currentNode.parentElement.removeChild(currentNode)
}