Hvordan fremheve tekst ved hjelp av JavaScript

Mens de utvikler dynamiske nettsteder, trenger utviklere ofte å fremheve tekst på en webside for å legge vekt på all tekst eller informasjon. Å fremheve tekst er en veldig nyttig funksjon som hjelper brukerne til å fokusere på den aktuelle teksten eller informasjonen.

Denne artikkelen vil beskrive prosedyren for å fremheve tekst i JavaScript.

Hvordan fremheve tekst ved hjelp av JavaScript?

For å fremheve tekst i JavaScript, bruk "merke”Element/tag i taggen eller JavaScript -filen. Det brukes med forhåndsdefinerte JavaScript -metoder, for eksempel “indrehtml”Attributt, og“getElementById ()”Metode. La oss se noen eksempler å forstå.

EKSEMPEL 1: Uthev hard kodetekst

I dette eksemplet vil vi legge til teksten på websiden dynamisk og fremheve den. For dette formålet, for det første, opprette en

element i en HTML -fil ved å tilordne en ID “tekst”:

Nå, i taggen, først, få

element som bruker den tildelte ID -en ved hjelp av “getElementById ()”Metode. Bruk deretter “indrehtml”Attributt for å legge til teksten på websiden. For å fremheve den spesifiserte teksten, legg den til mellom “" stikkord:

dokument.getElementById ("tekst").InnerHtml = "Lær JavaScript fra Linuxhint";

Produksjon

Eksempel 2: Uthev tekst på kjøretid (brukerspesifisert)

Her vil vi fremheve teksten i det gitte avsnittet som vil bli lagt inn av brukeren. For tilsvarende formål, legg til en tekst i en HTML -fil i en

tagg med en ID “beskjed”:

Linuxhint er en utmerket ressurs for å lære om Linux og relatert open source-programvare. Det tilbyr også mange opplæringsprogrammer og guider på forskjellige programmeringsspråk, som Java, Python, HTML, CSS, JavaScript, og så videre. Linuxhint gir enkel, tydelig og autentisk informasjon.

Lag et inndatafelt for å søke tekst for å fremheve i avsnittet:

Nå, i tag eller i JavaScript -filen, får du tilgang til avsnittet og tekstfeltet ved å bruke sine tildelte ID -er ved hjelp av "getElementById ()" -metoden:

const textMSG = dokument.getElementById ('melding');
const HighlightText = Dokument.getElementById ('HighlightText');

Bruke "AddEventListener ()”Metode som vil søke i den angitte verdien i avsnittet og fremheve den. For dette formålet, bruk et vanlig uttrykk for å finne all tekst som samsvarer med det søkte ordet eller setningen. For å fremheve matchet tekst, bruk taggen:

HighlightText.AddEventListener ('input', (hendelse) =>
const textSearch = event.mål.verdi;
const regexpattern = new regexp (textsearch, 'gi');
La tekst = TextMsg.indrehtml;
tekst = tekst.erstatte (/(|)/gim, ");
const newText = tekst.erstatte (regexpattern, '$ &');
TextMsg.InnerHTML = newText;
);

Som du kan se at vi med hell har fremhevet teksten i avsnittet som blir søkt i inngangsboksen:

Det handlet om å fremheve teksten i JavaScript.

Konklusjon

For å fremheve tekst i JavaScript, bruk "merke”Element/tag i taggen eller JavaScript -filen. I denne artikkelen har vi gitt riktig detaljerte eksempler for å fremheve teksten i JavaScript. Vi ga et eksempel på hardkodet tekst som fremheves i tillegg til å fremheve eller velge tekst med den brukerinnleggede verdien.