Como destacar o texto usando JavaScript

Ao desenvolver sites dinâmicos, os desenvolvedores frequentemente precisam destacar o texto em uma página da web para enfatizar qualquer texto ou informação. Destacando o texto é um recurso muito útil que ajuda os usuários a se concentrarem no texto ou informação específica.

Este artigo descreverá o procedimento para destacar o texto em JavaScript.

Como destacar o texto usando JavaScript?

Para destacar o texto em JavaScript, utilize o “marca”Elemento/tag na tag ou arquivo javascript. É usado com métodos de JavaScript predefinidos, como o “InnerhtmlAtributo e o “getElementById ()”Método. Vamos ver alguns exemplos para entender.

Exemplo 1: Destaque o texto do código duro

Neste exemplo, adicionaremos o texto na página da web dinamicamente e o destacaremos. Para esse fim, primeiro, crie um

Elemento em um arquivo HTML atribuindo um ID “texto”:

Agora, na tag, primeiro, obtenha o

elemento usando seu ID atribuído com a ajuda de “getElementById ()”Método. Então, use o “Innerhtml”Atributo para adicionar o texto na página da web. Para destacar o texto especificado, adicione -o entre o “" marcação:

documento.getElementById ("texto").INNERHTML = "Aprenda JavaScript do Linuxhint";

Saída

Exemplo 2: Destaque o texto no tempo de execução (especificado pelo usuário)

Aqui, destacaremos o texto no parágrafo fornecido que será inserido pelo usuário. Para o objetivo correspondente, adicione um texto em um arquivo html em um

tag com um id “mensagem”:

Linuxhint é um excelente recurso para aprender sobre Linux e software de código aberto relacionado. Ele também oferece muitos tutoriais e guias sobre diferentes linguagens de programação, como Java, Python, HTML, CSS, JavaScript e assim por diante. Linuxhint fornece informações simples, claras e autênticas.

Crie um campo de entrada para a pesquisa de texto para destacar no parágrafo:

Agora, na tag ou no arquivo JavaScript, acesse o parágrafo e o campo de texto usando os IDs atribuídos com a ajuda do método "getElementById ()":

const textMsg = documento.getElementById ('mensagem');
const destactText = documento.getElementById ('DestactText');

Use o "addEventListener ()”Método que pesquisará o valor inserido no parágrafo e o destacará. Para esse fim, use uma expressão regular para encontrar todo o texto que corresponda à palavra ou frase pesquisada. Para destacar o texto correspondente, utilize a tag:

DestactText.addEventListener ('input', (evento) =>
const textSearch = evento.alvo.valor;
const regexpattern = novo regexp (textSearch, 'gi');
deixe texto = textmsg.innerhtml;
texto = texto.substituir (/(|)/gim, ");
const newText = texto.substituir (regexpattern, '$ &');
textmsg.inerhtml = newText;
);

Como você pode ver, destacamos com sucesso o texto no parágrafo pesquisado na caixa de entrada:

Isso se tratava de destacar o texto em JavaScript.

Conclusão

Para destacar o texto em JavaScript, use o “marca”Elemento/tag na tag ou arquivo javascript. Neste artigo, fornecemos exemplos adequadamente detalhados para destacar o texto em JavaScript. Demos um exemplo de destaque de texto codificado, além de destacar ou selecionar texto pelo valor digno do usuário.