die Worte in nur bestimmte div class Hightlight wenn jedes Wort Javascript in Array vorhanden ist, mit

Question

Hallo Freunde Ich versuche die Worte in einer bestimmten div class zu markieren, wenn jedes Wort

Beispiel

in Array vorhanden ist

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

möchte ich nur Worte in hervorgehoben markieren, wenn jedes Wort in dem Feld vorhanden ist mir jemand kann

Answer 1

ich habe versucht, aber es unterstreicht die Worte auf komplette Seite bitte helfen, aber ichwollennur auf bestimmte Klasse

Verwendung document.getElementsByClassName("highlighed"), wird dies eine htmlcollection zurück, die

Dieses unterhalb Schnipsel nur diese spezielle Klasse hat useful.Have hinzugefügt Kommentare zur Beschreibung seines

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>