JSFiddle - React, Tailwind, and code Playground

by zakariamouhid

HTML

before

↚
this content will be contained inside #hide div
↚

after

CSS

#hide {
  color: #f00;
}

JavaScript

function getAllTextNodes(el, out = []) {
  for (let node of el.childNodes) {
    if (node.nodeType === node.TEXT_NODE) {
      out.push(node);
    } else if (node.nodeType === node.ELEMENT_NODE)  {
      getAllTextNodes(node, out);
    }
  }
  return out;
}
getAllTextNodes(document.body).forEach(text => {
	// '↚' === '\u219a'
  // '↚'.charCodeAt(0).toString(16) === '219a'
  let match = text.data.match(/^([\s\S]*)\u219a([\s\S]*)\u219a([\s\S]*)$/);
  if (!match) return;
  let [, before, content, after] = match;
  let div = document.createElement('div');
  div.append(document.createTextNode(content));
  div.id = "hide";
  text.replaceWith(
    before,
    div,
    after
  );
});