在HTML文档中查找单词并为该元素指定ID / Class

问题描述 投票:1回答:1

我正在寻找一种方法来找到一个单词,并根据该单词确定它所在的元素,以便为该元素设置样式。我必须搜索自动生成的报告,生成的元素和生成的报告只是很长的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.
}
}
javascript html regex indexof
1个回答
1
投票

使用“search()”方法在字符串中搜索指定的值。如果没有匹配,它将返回-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);
© www.soinside.com 2019 - 2024. All rights reserved.