Html 如何制作'；在第'；页中搜索；是否发现多个元素中的单词

//on page ready
document.addEventListener('DOMContentLoaded', ()=>{  
  //this is the container target
  //NOTE! I'm using querySelector on a classname.. it will return only the first element having that class
  const containerDiv = document.querySelector('.container');
  
  //it draws the arrows inside the target on top of each children span
  redrawArrows(containerDiv);
  
  //sets up an observer that will redraw the arrows when the target container is resized
  const resizeObserver = new ResizeObserver( ()=>{
   //using a delay of 50ms before redrawing (to be 100% sure it won't mess up with coords too early)
   setTimeout(() => {
        redrawArrows(containerDiv);
    }, 50);    
  } );
  resizeObserver.observe(containerDiv);
})

function redrawArrows(container){  

  //remove any existing arrows
  container.querySelectorAll('.arrow')
    .forEach(arrow => arrow.remove());

  //for each .fragment in container, adds an arrow in top
  container.querySelectorAll('.fragment')
    .forEach(fragment => addArrowOnTopOfSpan(container, fragment));
}

function addArrowOnTopOfSpan(container, span){  
  document.body.offsetHeight; // Force reflow
  
  //creates a new div to render the arrow
  const arrow = document.createElement('div');
  arrow.classList.add('arrow');    
  arrow.innerHTML = '⇣';    
  arrow.style.left = `${span.offsetLeft}px`;
  //the y coord is shifted 1em upward
  arrow.style.top = `calc( ${span.offsetTop}px - 1em )`;    
  
  container.appendChild(arrow);
}

body {
  margin-top: 1rem;
}

.container{
  position: relative;
}

.fragment{
  margin-right: 1em;
  margin-top: 1em;
  /*this is important for the offset coords to work as expected!*/
  display: inline-block;
}

.arrow{
  position: absolute;
  color: red;
}

.note{
  margin-top: 2em;
}

<div class="container">
  <span class="fragment">This_is_a_very_long_text_to</span><span class="fragment">highlight_a_scenario_where</span><span class="fragment">the_content_will_word_wrap</span><span class="fragment">no_matter_what_even_if_theres</span><span class="fragment">no_space_in_between_words</span>
</div>