2017-12-31 53 views
8

ich mithilfe von jQuery inArray Funktion ein Wort aus einem Array enthält, wenn eine Zeichenfolge zu bestimmen, ich versuche, die unter https://stackoverflow.com/a/18867667/5798798kann nicht ermittelt werden, ob eine Zeichenfolge ein Wort aus einem Array enthält

In meinem Beispiel hier gezeigt wird, Es sollte zweimal 'Hallo' an die Konsole ausgeben, da das Wort 'Hallo' zweimal in der Zeichenkette ist und im Array ist, tut es jedoch nicht.

var array = ["Hello", "Goodbye"]; 
 

 
a = document.getElementsByClassName("here"); 
 

 
for (i = 0; i < a.length; i++) { 
 
    itag = a[i].getElementsByTagName("i")[0]; 
 
    if (jQuery.inArray(itag.innerHTML, array) !== -1) { 
 
    console.log('hi'); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i> 
 
</div> 
 

 
<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i> 
 
</div>

+0

Logic rückwärts ist. Sie müssen das Array durchlaufen und jedes Wort gegen die längere Zeichenfolge prüfen.Sie versuchen zu sehen, ob eine lange HTML-Zeichenfolge im Array existiert – charlietfl

+0

Sie müssen die a-Elemente innerhalb der Kursivschrift Schleife durchlaufen ... und überprüfen Sie ihre innere.html – Ctznkane525

Antwort

8

ändern inArray Funktion mit array.some(text => itag.textContent.includes(text)).

Deklarieren Sie alle Variablen über var or const or let.

Anstelle von innerHTMLtextContent verwenden. Dies wird nicht versuchen, den Inhalt zu analysieren und wird schneller arbeiten.

var array = ["Hello", "Goodbye"]; 
 

 
var a = document.getElementsByClassName("here"); 
 

 
for (var i = 0; i < a.length; i++) { 
 
    var itag = a[i].getElementsByTagName("i")[0]; 
 
    var textContent = itag.textContent; 
 
    if(array.some(text => textContent.includes(text))) { 
 
     console.log(textContent); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i> 
 
</div> 
 

 
<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i> 
 
</div>

+0

Gibt es eine Chance, Sie könnten die Zeile des Codes erklären 'if (Array. einige (text => textContent.includes (text))) {'für mich bitte? –

+0

Es prüft, ob das 'textContent.includes (text)' für mindestens ein Element im 'Array' den Wert 'true' zurückgibt. In unserem Fall, wenn mindestens ein Element von 'array' im 'textContent' enthalten ist –

+0

Ah ich sehe. Können Sie mir in diesem Fall den Zweck von '=>' mitteilen? –

2

Sie überprüfen, ob innerHTML- im Array ist oder nicht.

Eigentlich sollten Sie überprüfen, ob das innere HTML aus irgendeinem der Array-Elemente besteht.

Also, wenn Sie die obige Aussage, um Code zu konvertieren, sollte es

var array = ["Hello", "Goodbye"]; 
 

 
a = document.getElementsByClassName("here"); 
 

 
for (i = 0; i < a.length; i++) { 
 
    debugger; 
 
    var itag = a[i].getElementsByTagName("i")[0]; 
 
    for (var k in array) { 
 
    if(itag.innerHTML.indexOf(array[k]) > -1){ 
 
    console.log('hi'); 
 
    } 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i> 
 
</div> 
 

 
<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i> 
 
</div>

0

sein einfacherer Ansatz ist eine Schleife über das Array Wörter und verwenden :contains Selektor

var array = ["Hello", "Goodbye"], 
 
    $links = $('.here i a'); 
 

 
$.each(array, function(i, word){ 
 
    $links.filter(':contains(' + word +')').addClass('word-match'); 
 
})
.word-match {color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="here"><i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i> 
 
</div> 
 

 
<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i> 
 
</div>

0

Nicht wirklich eine Antwort, eher eine Erweiterung zu @SurenSrapyan answer mit weiteren Verbesserungen an Ihrem Code.

Statt mit diesem verschachtelten getElementsByTagName Umgang und getElementsByClassName hier, können Sie dies als eine einzelne CSS-Selektor schreiben Targeting die Knoten: document.querySelectorAll('.here i:first-of-type');

Und innerHTML und textContent sind beide Getter, der den Wert erstellen, wie Sie es abholen durch das DOM durchlaufen. Speichern Sie den Wert also einmal in einer Variablen, und laden Sie ihn dann in einer Schleife, in der er immer wieder neu erstellt werden muss. nun, es sei denn, der Wert könnte sich geändert haben.

var words = ["Hello", "Goodbye"]; 
 
var nodes = document.querySelectorAll('.here i:first-of-type'); 
 

 
for(var i=0; i<nodes.length; ++i){ 
 
    var node = nodes[i]; 
 
    var textContent = node.textContent; 
 
    if(words.some(word => textContent.includes(word))) { 
 
     console.log(node, textContent); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="here"> 
 
    <i><a href="link.php">Hello</a> | <a href="link2.php">Example</a></i> 
 
    <i>Hello, not matching me, as I'm not the first &lt;i&gt; in .here</i> 
 
</div> 
 

 
<div class="here"><i><a href="link.php">Hey</a> | <a href="link2.php">Hello</a></i> 
 
</div>

0

Die eleganteste Weg, es zu finden ist offensichtlich ein RegExp

var array = ["Hello", "Goodbye"]; 

    var a = document.getElementsByClassName("here"); 
    Array.prototype.forEach.call(a, function(node) { 
     var itag = node.getElementsByTagName("i")[0] 
     if (itag.innerHTML.match(new RegExp(array.join('|'), 'gi'))) { 
     console.log('hi') 
     } 
    }); 
Verwandte Themen