在 HTML 文档中找到一个词并将 ID/Class 分配给该元素

Question

我正在寻找一种方法来找到一个词，并根据该词确定它所在的元素，以便为该元素设置样式。我必须搜索自动生成的报告，元素和生成的报告只是非常长的 span 标签列表，在下面的代码中缩短了。报告的长度永远不会相同。

<html>

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 15 (filtered)">
</head>

<body lang=EN-US>

<div class=WordSection1>

<p class=MsoPlainText><span style='font-family:"Courier New"'>&nbsp;</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>Filters</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>                                   
Filter Name: BADDATAFILTER                                        </span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>&nbsp;</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>Description</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>                                   
Record Type: A                                              </span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>                                   
Description: SKIP BAD INFO                                  </span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>&nbsp;</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>Conditions</span></p>

<p class=MsoPlainText><span style='font-family:"Courier New"'>                    
Condition Argument: 1 Or 2 Or 3 Or 4 Or 5 Or 6 Or 7 Or 8 Or 9 Or 10 Or 11   </span></p>
    </div>

</body>

</html>

我已经尝试过 RegExp，我不确定它是否真的能帮到我。我检查了 indexOf()，我认为这是一个解决方案，但我不太确定此时此刻我该如何做。有人有想法吗？

这是我尝试使用它的地方，但这段代码是错误的代码。只是发帖，这样您就可以了解我正在尝试什么，或者看到我正在尝试去哪里。

for each (i in document.body) {
  if (spans[i].text.indexOf('SKIP BAD INFO') != -1) {
console.log("string found");
//do more stuff, like get the element we found the word in to style it.
}
}

Answer 1

使用 "search( )" 方法在字符串中搜索指定值。如果没有匹配，它将 return -1。

//Search for 'SKIP BAD INFO'
var search = document.querySelectorAll('span');
var resultIndex = 0;
for(var i = 0; i < search.length; i++){
  if(search[i].innerText.search('SKIP BAD INFO') != -1){
    console.log('text found!');
    resultIndex = i;
  }
}

//Assign ID/Class
search[resultIndex].classList.add('className'); //Class
search[resultIndex].setAttribute('id', 'idName'); //ID

//Change CSS
search[resultIndex].style.color = red;

如果有多个结果，将索引存储在数组中。

resultIndex = [];

//In the for loop
resultIndex.push(i);

在 HTML 文档中找到一个词并将 ID/Class 分配给该元素

Find a word in HTML document and Assign ID/Class to that element

html

javascript

regex

indexof