使用 JS 数组突出显示特定类中的单词

Posted 2023-02-22

【中文标题】使用 JS 数组突出显示特定类中的单词

【英文标题】：Highlight words in particular class using JS array

【发布时间】：2018-06-08 19:40:27

【问题描述】：

给定一个特定类的 div，我想突出显示存在于包含关键字的 JS 数组中的单词。

例如：

  var cars = ["hello", "when", "why"];
  <p class="highlighted">How are you when</p>
  <p>How are you</p>

【问题讨论】：

我试过了，但它会突出显示完整页面上的单词，但我只想要特定的类

【参考方案1】：

我已经尝试过，但它会突出显示完整页面上的文字，但我想要 仅在特定课程上

使用document.getElementsByClassName("highlighed")，这将返回一个只有这个特定类的htmlcollection

sn-p下面这个可能有用。已添加cmets进行说明

var cars = ["hello", "when", "why", "are"];
//get the dom which have this specific class
var classes = document.getElementsByClassName("highlighed");
//convert collection to array to use array method
//forEach is array method
Array.prototype.slice.call(document.getElementsByClassName("highlighed")).forEach(function(item) 
  //get the innerHTML and remove whitespace and create an array from it
  var getText = item.innerHTML.trim().split(' ');
  // iterate this newly created array
  getText.forEach(function(item2, index) 
    //check if any text is matching with cars array
    if (cars.indexOf(item2) > -1) 
      // replace the element in newly created array with dom element
      getText[index] = "<span class='lightText'>" + item2 + "</span>"
    
  );
  // create string array using join
  item.innerHTML = getText.join(' ');
)

.lightText 
  color: green;

<p class="highlighed">How are you when</p>
<p>How are you</p>