从textContent中的单词获取DOM元素

Question

我有一个非常脏的HTML，在文本中和周围的单词之间以及周围都有随机的span类和div。

<div class="c x1 y1 w2 h2">
    <div class="t {..}">U<span class="_ _0"></span>rna S<span class="_ _1"></span>empe<span class="_ _1"></span>r </div>
    <div class="t {..}">123<span class="ff3"> High Str<span class="_ _0"></span>eet </span>
    </div>
    <div class="t {..}">Anyto<span class="_ _0"></span>wn, County<span class="_ _2"></span>, Post<span class="_ _0"></span>code </div>
    <div class="t {..}">01234<span class="ff3"> </span>567<span class="ff3"> </span>890<span class="ff3"> </span></div>
    <div class="t {..}">no_repl<span class="_ _0"></span>y<span class="_ _0"></span>@e<span class="_ _0"></span>xa<span class="_ _0"></span>mpl<span class="_ _0"></span>e.<span class="_ _0"></span>com </div>
    <div class="t {..}">21<span class="ff3"> Ma<span class="_ _0"></span>y <span class="ff2">2020</span> </span>
    </div>
    <div class="t {..}">T<span class="_ _0"></span>renz Pruca </div>
    <div class="t {..}">432<span class="ff3"> First Street </span></div>
    <div class="t {..}">Anyto<span class="_ _0"></span>wn,<span class="ff2"></span>County<span class="_ _2"></span>, Post<span class="_ _0"></span>code </div>
    <div class="t {..}">Dea<span class="_ _0"></span>r T<span class="_ _0"></span>renz, </div>
    <div class="t {..}">T<span class="_ _3"></span>esting a<span class="_ _3"></span>tt<span class="_ _3"></span>ention plea<span class="_ _3"></span>s<span class="_ _1"></span>e, bla<span class="_ _3"></span>h bla<span class="_ _0"></span>h, ra<span class="_ _3"></span>ndom words, Inc<span class="_ _0"></span>eption is pr<span class="_ _0"></span>oba<span class="_ _3"></span>bly a </div>
    <div class="t {..}">rea<span class="_ _3"></span>lly g<span class="_ _0"></span>ood mov<span class="_ _3"></span>ie. </div>
    <div class="t {..}">Urna Semper</div>
</div>

我希望能够获得每个单词的dom元素并说出类似的内容：

word_dom.style.backgroundColor = 'nice red color'
// or
pos = word_dom.getBoundingClientRect();

现在，幸运的是，当我在肮脏的输入容器上调用textContent()方法时，文本很好并且格式相对正确。

Urna Semper 123 High Street Anytown, County, Postcode 01234 567 890 [email protected] 21 May 2020 Trenz Pruca 432 First Street Anytown,County, Postcode Dear Trenz, Testing attention please, blah blah, random words, Inception is probably a really good movie. Urna Semper

起初，我使用Python后端，并通过比较HTML和文本内容，生成差异图并将单个单词包装在div中，来递归地尝试“清理”该内容。它运行缓慢，存在许多错误，无法完美运行，并且需要服务器电源来执行客户端计算机应执行的简单任务。

我想将此过程移至Javascript。

这不起作用：

dirtydom.textContent.split(' ').forEach( (w) => { 
   // w is not a dom :c 
})

是否有办法获取一部分文本并将其转换为dom元素？

非常感谢。

Answer 1

使用Jquery在您的html中查找范围，

let listSpans = $("html").find("span");

如果要为这些跨度提供背景色，

   for(let i=0;i<listSpans.length;i++){
      $(listSpans[i]).css("background-color", "yellow");
    }