Jak wyróżnić tekst za pomocą JavaScript

Podczas opracowywania dynamicznych stron internetowych, programiści często muszą wyróżnić tekst na stronie internetowej, aby podkreślić dowolny tekst lub informacje. Podświetlenie tekstu jest bardzo przydatną funkcją, która pomaga użytkownikom skupić się na konkretnym tekście lub informacji.

W tym artykule opisano procedurę podświetlania tekstu w JavaScript.

Jak wyróżnić tekst za pomocą JavaScript?

Aby wyróżnić tekst w JavaScript, użyj „ocena”Element/Tag w pliku znacznika lub JavaScript. Jest stosowany z predefiniowanymi metodami JavaScript, takimi jak „InnerHtml”Atrybut i„getElementById ()" metoda. Zobaczmy kilka przykładów do zrozumienia.

Przykład 1: Podświetl tekst kod twardy

W tym przykładzie dodamy tekst na stronie internetowej i wyróżnimy go. W tym celu najpierw stwórz

element w pliku HTML, przypisując identyfikator „tekst”:

Teraz, w tagu, najpierw zdobądź

element za pomocą przypisanego identyfikatora za pomocą „getElementById ()" metoda. Następnie użyj „InnerHtml”Atrybut, aby dodać tekst na stronie internetowej. Aby wyróżnić określony tekst, dodaj go między „”Tag:

dokument.getElementById („tekst”).innerhtml = "naucz JavaScript z Linuxhint";

Wyjście

Przykład 2: Podświetl tekst w czasie działania (określony przez użytkownika)

Tutaj podkreślimy tekst w danym akapicie, który zostanie wprowadzony przez użytkownika. W odpowiednim celu dodaj tekst w pliku HTML w a

tag za pomocą identyfikatora „wiadomość”:

Linuxhint jest doskonałym zasobem do nauki o Linux i powiązanym oprogramowaniu open source. Oferuje także wiele samouczków i przewodników dotyczących różnych języków programowania, takich jak Java, Python, HTML, CSS, JavaScript i tak dalej. Linuxhint zapewnia proste, jasne i autentyczne informacje.

Utwórz pole wejściowe do wyszukiwania tekstu, aby wyróżnić w akapicie:

Teraz, w tag lub w pliku JavaScript, dostęp do akapitu i pola tekstowego za pomocą przypisanych identyfikatorów za pomocą metody „getElementById ()”:

const TextMsg = Dokument.getElementById („wiadomość”);
const cextroveText = Dokument.getElementById („figuelText”);

Użyj "addEventListener ()„Metoda, która przeszuka wprowadzoną wartość w akapicie i ją podkreśla. W tym celu użyj wyrażenia regularnego, aby znaleźć cały tekst pasujący do wyszukiwanego słowa lub zdania. Aby wyróżnić dopasowany tekst, użyj znacznika:

Zaznaczanie tekstu.addEventListener ('input', (event) =>
Const TextSearch = zdarzenie.cel.wartość;
const regexpattern = new Regexp (textSearch, „gi”);
Let Text = TextMsg.InnerHtml;
tekst = tekst.zamień (/(|)/gim, ");
const newText = tekst.zamień (RegexPattern, „$ &”);
Textmsg.innerHtml = newText;
);

Jak widać, z powodzeniem wyróżniliśmy tekst w akapicie wyszukiwanym w polu wejściowym:

Chodziło o podkreślanie tekstu w JavaScript.

Wniosek

Aby wyróżnić tekst w JavaScript, użyj „ocena”Element/Tag w pliku znacznika lub JavaScript. W tym artykule przedstawiliśmy odpowiednio szczegółowe przykłady podkreślenia tekstu w JavaScript. Podaliśmy przykład podświetlania tekstu, a także wyróżnianie lub wybór tekstu według wartości wprowadzonej przez użytkownika.