Найдите слово в документе HTML и присвойте этому элементу идентификатор / класс - PullRequest
Новая
       12

Найдите слово в документе HTML и присвойте этому элементу идентификатор / класс

1 голос
/ 26 марта 2019

Я ищу способ найти слово и на основе этого слова определить, в каком элементе он находится, с целью стилизации этого элемента. Я должен искать в отчете, который создается автоматически, элементы и созданные отчеты - это просто очень длинные списки тегов 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.
}
}

1 Ответ

1 голос
/ 26 марта 2019

Используйте метод «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);
...