JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<p>1st co<p>2nd content</p>ntent</p>

<p>3rd content</p>
<p>4th content</p>
<p>5th content</p>
<p>6th content</p>
<p>7th content</p>
<p>8th content</p>
<p>9th content</p>
</div>
sadsadasd
<button onclick="highlight()">Highlight</button>

<rb-f  class='rb' dt-hz='大会'>
   <rb>&#160;</rb>
   <rt>Assembléia</rt>
   <rt>Dàhuì</rt>
   <rt>大会</rt>
</rb-f>
<rb-f  class='rb' dt-hz='资讯'>
    <rb>&#160;</rb>
    <rt>informações</rt>
    <rt>zīxùn</rt>
    <rt>资讯</rt>
</rb-f>

CSS

.1232323233 {
    background-color: #FFCCCC;
    font-weight: bold;
}
.highlight {
    background-color: #FFCCCC;
    font-weight: bold;
}

rb-f {
  display: inline-block;
  /*line-height: 1em;*/
  /*position: relative;*/
  text-align: center;
  /*padding: 1px;*/
}

rb-f > rb {
  /*display: inline-block;*/
  /*padding-top: -0.6em;*/
  display: block;
  visibility:hidden;
}

rb-f > rt {
  /*font-size: 0.55em;*/
  /*position: absolute;*/
  /*display: inline-block;*/
  display: block;
  /*visibility:hidden;*/
  /*line-height: -1.3em;*/
  /*top: 0;*/
}

JavaScript

console.clear();
function highlight() {
    const r = window.getSelection().getRangeAt(0);
const range = document.createRange();
range.selectNode(r.startContainer);
const idWrapper = document.createElement('span');
idWrapper.setAttribute('class', '1232323233');



range.surroundContents(idWrapper);
}