Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML

Bei der Arbeit an einem Projekt bin ich kürzlich auf eine Funktion gestoßen: das Hervorheben von Schlüsselwörtern auf einer Webseite.

Ich dachte, es handele sich um eine einfache Operation, die mit einem innerHTML-Ersetzen durchgeführt werden könnte, aber ich bin auf viele Probleme gestoßen. In diesem Artikel werden diese Probleme und die endgültige perfekte Lösung beschrieben, in der Hoffnung, Freunden zu helfen, die die gleiche Erfahrung gemacht haben. Wenn Sie nur an den Ergebnissen interessiert sind, ignorieren Sie den Vorgang und fahren Sie mit den Ergebnissen fort.

Gängige Praxis: Regelmäßiger Austausch

Idee: Um Elemente hervorzuheben, müssen Sie die Schlüsselwörter extrahieren, sie mit Tags umschließen und dann den Stil der Tags anpassen. Verwenden Sie innerHTML oder outHTML anstelle von innerText oder outText.

const regex = neuer RegExp(Schlüsselwort,"g")
element.innerHTML = element.innerHTML.replace(regulärer Ausdruck,"<b class="a">"+Schlüsselwort+"</b>")
element.classList.add("hervorheben")

Dabei sind folgende Gefahren verborgen:

()\
div
<div id="übergeordnet">
    <div Klasse="Test">Test</div>
  </div>

Das Schlüsselwort „übergeordnetes Knotenelement“ verwendet eine Klasse zum Durchführen einer Hintergrundfärbung, die das ursprüngliche DOM bis zu einem gewissen Grad verschmutzt und die Neupositionierung des Elements beeinträchtigen kann. (Da es sich um ein Plugin handelt, ist zu hoffen, dass das ursprüngliche DOM so wenig wie möglich verändert wird.)

Regelmäßige Optimierung 1: Nur Elemente innerhalb von Tags verarbeiten

var formatKeyword = text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') // Escapen Sie Sonderzeichen, die im Schlüsselwort enthalten sind, wie z. B. /.
var finder = new RegExp(">.*?"++".*?<") // Extrahieren Sie den Text im Tag, um Fehlfunktionen von Klasse, ID usw. zu vermeiden. element.innerHTML = element.innerHTML.replace(finder,function(matched){
        Rückgabewert: matched.replace(Text,"<br>"+Text+</br>)
}) // Ersetzen Sie Schlüsselwörter im extrahierten Tag-Text

Dies kann die meisten Probleme lösen, aber das Problem, das immer noch besteht, ist, dass die Übereinstimmungsregeln verletzt werden und der reguläre Extraktionsinhalt falsch ist, solange Symbole wie < in den Tag-Attributen vorhanden sind. HTML5-Datensätze können jeden Inhalt anpassen, daher sind diese Sonderzeichen unvermeidlich.

<div dataset="p>d">Ersetzen</div>

Regelmäßige Optimierung 2: Eventuell betroffene Labels löschen

<div id="Schlüsselwort">Schlüsselwort</div>
  =》Ersetze das schließende Tag durch eine Variable [replaced1] keyword [replaced2] // id="keyword" im schließenden Tag wird nicht verarbeitet =》
  [ersetzt1]<b>Stichwort</b>[ersetzt2]
  =》Ersetzen Sie die temporäre Variable durch das ursprüngliche Tag <div id="keyword"><b>keyword</b></div>

• Diese Idee und der Quellcode stammen von hier, aber das Problem ist:
• Wenn [replaced1] das Schlüsselwort enthält, tritt beim Ersetzen eine Ausnahme auf

Das Wichtigste dabei ist, dass diese Methode Tags nicht korrekt extrahieren kann, wenn der Tag-Wert die Symbole <> enthält.

Kurz gesagt: Auch nach vielen Versuchen konnten reguläre Ausdrücke in verschiedenen Situationen nicht effektiv eingesetzt werden. Dann habe ich meine Denkweise geändert und es über Knoten statt über Zeichenfolgen verarbeitet. element.childNodes kann die Rauschinformationen innerhalb des Tags am effektivsten bereinigen.

[Perfekte Lösung] Verarbeitung über DOM-Knoten

<div id="übergeordnet">
    Stichwort 1
  <span id="Kind">
    Stichwort 2
  </span>
 </div>

Holen Sie sich alle untergeordneten Knoten über parent.childNodes. Der untergeordnete Knoten kann durch innerText.replce(keyword,result) ersetzt werden, um den gewünschten Hervorhebungseffekt wie folgt zu erzielen: <span id="child"><b>keyword</b> 2</span> (rekursive Verarbeitung: Ersetzen, wenn der untergeordnete Knoten keine untergeordneten Knoten enthält).

Schlüsselwort 1 ist jedoch ein Textknoten und Sie können nur den Textinhalt ändern, aber kein HTML hinzufügen und den Stil nicht unabhängig steuern. Und Textknoten können nicht in normale Knoten umgewandelt werden, was äußerst ärgerlich ist.

Zum Schluss kommt hier der Fokus dieses Artikels. Durch diese Funktion habe ich mich zum ersten Mal ernsthaft mit Textknoten beschäftigt. Von hier aus wird Text erkannt und die Hervorhebung erfolgt durch Ausschneiden und Ersetzen von Textknoten.

Quellcode und Hervorhebung wiederherstellen siehe Quellcode

const reg = neuer RegExp(Schlüsselwort.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'))
Hervorhebung = Funktion (Knoten, Reg) {
    if (node.nodeType == 3) { //Nur Textknoten verarbeiten const match = node.data.match(new RegExp(reg));
        wenn (Übereinstimmung) {
          const highlightEl = document.createElement("b");
          highlightEl.dataset.highlight="j"
          const wordNode = node.splitText(match.index).
          wordNode.splitText(match[0].length); // In das erste Schlüsselwort und die letzten drei Textknoten schneiden const wordNew = document.createTextNode(wordNode.data);
          highlightEl.appendChild(wordNew);//Hervorhebungsknoten wurde erfolgreich erstellt wordNode.parentNode.replaceChild(highlightEl, wordNode);//Textknoten ersetzen}
    } sonst wenn (node.nodeType == 1 und node.dataset.highlight!="y"
    ) {
        für (var i = 0; i < node.childNodes.length; i++) {
            Hervorhebung(Knoten.Unterknoten[i], reg);
            ich++
        }
    }  
}

Zusammenfassen

Oben habe ich Ihnen die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML vorgestellt. Ich hoffe, sie wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!