Heim >Web-Frontend >js-Tutorial >Wie kann ich eine einzelne Textinstanz in JavaScript hervorheben?
Text mit JavaScript hervorheben
Das Hervorheben von bestimmtem Text auf einer Webseite kann die Benutzererfahrung verbessern und die Aufmerksamkeit auf wichtige Inhalte lenken. Diese Demonstration konzentriert sich auf die Hervorhebung eines einzelnen Vorkommens, im Gegensatz zum typischen Hervorhebungseffekt, der alle Instanzen des Textes identifiziert, der üblicherweise in Suchfunktionen verwendet wird.
jQuery-Hervorhebungseffekt
Für eine schnelle und einfache Lösung kann der jQuery-Hervorhebungseffekt verwendet werden:
$(selector).highlight(text, options);
Geben Sie einfach den zu erreichenden Text und die Hervorhebungsoptionen an Ihr gewünschtes Ergebnis.
Benutzerdefinierter JavaScript-Code
Wenn Sie einen reinen JavaScript-Ansatz bevorzugen, sollten Sie dieses Code-Snippet in Betracht ziehen:
function highlight(text) { // Get the target element var inputText = document.getElementById("inputText"); // Extract the element's HTML content var innerHTML = inputText.innerHTML; // Locate the first occurrence of the text var index = innerHTML.indexOf(text); // Check if text is found if (index >= 0) { // Inject highlight markup around the matching text innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length); // Update the element with highlighted text inputText.innerHTML = innerHTML; } }
Nicht Vergessen Sie, den entsprechenden CSS-Stil für die Klasse „Highlight“ hinzuzufügen:
.highlight { background-color: yellow; }
Verwendung Beispiel
Um das Wort „fox“ in einem bestimmten div-Element hervorzuheben, rufen Sie einfach die Hervorhebungsfunktion auf:
<button onclick="highlight('fox')">Highlight</button> <div>
Durch Klicken auf die Schaltfläche wird das erste Vorkommen von „fox“ hervorgehoben. in gelb.
Das obige ist der detaillierte Inhalt vonWie kann ich eine einzelne Textinstanz in JavaScript hervorheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!