JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/349738

by Lhankor_Mhy

HTML

<div id="target">
  <h1>タイトルABCが入ります</h1>
  <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) {
        return !node.parentElement.classList.contains('alphabet');
      }
    }
);
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)
}