Cómo resaltar el texto usando JavaScript

Mientras desarrollan sitios web dinámicos, los desarrolladores con frecuencia necesitan resaltar texto en una página web para enfatizar cualquier texto o información. Destacar el texto es una característica muy útil que ayuda a los usuarios a centrarse en el texto o la información en particular.

Este artículo describirá el procedimiento para resaltar el texto en JavaScript.

Cómo resaltar el texto usando JavaScript?

Para resaltar el texto en JavaScript, utilice el "marcaElemento/etiqueta en la etiqueta o el archivo JavaScript. Se usa con métodos de JavaScript predefinidos, como el "innerhtml"Atributo, y el"getElementById ()" método. Veamos algunos ejemplos para entender.

Ejemplo 1: resaltar el texto del código duro

En este ejemplo, agregaremos el texto en la página web dinámicamente y lo resaltaremos. Para este propósito, primero, cree un

Elemento en un archivo HTML asignando una ID "texto":

Ahora, en la etiqueta, primero, obtenga el

elemento usando su identificación asignada con la ayuda de "getElementById ()" método. Entonces, usa el "innerhtml"Atributo para agregar el texto en la página web. Para resaltar el texto especificado, agrégalo entre el "" etiqueta:

documento.getElementById ("texto").innerhtml = "Learn JavaScript de Linuxhint";

Producción

Ejemplo 2: resalte el texto en el tiempo de ejecución (especificado por el usuario)

Aquí, resaltaremos el texto en el párrafo dado que será ingresado por el usuario. Para el propósito correspondiente, agregue un texto en un archivo HTML en un

Etiqueta con una identificación "mensaje":

Linuxhint es un excelente recurso para aprender sobre Linux y el software de código abierto relacionado. También ofrece muchos tutoriales y guías en diferentes lenguajes de programación, como Java, Python, HTML, CSS, JavaScript, etc. Linuxhint proporciona información simple, clara y auténtica.

Cree un campo de entrada para buscar texto para resaltar en el párrafo:

Ahora, en la etiqueta o en el archivo JavaScript, acceda al párrafo y al campo de texto utilizando sus IDS asignados con la ayuda del método "getElementById":

const textmsg = documento.getElementById ('Mensaje');
const resoftext = documento.getElementById ('spowntext');

Utilizar el "addEventListener ()Método que buscará el valor ingresado en el párrafo y lo resaltará. Para este propósito, use una expresión regular para encontrar todo el texto que coincida con la palabra o oración buscada. Para resaltar el texto coincidente, utilice la etiqueta:

Subrayar el texto.addEventListener ('input', (event) =>
const textsearch = evento.objetivo.valor;
const regexPattern = new Regexp (TextSearch, 'GI');
Dejar text = textmsg.innerhtml;
texto = texto.reemplazar (/(|)/gim, ");
const NewText = texto.reemplazar (regexPattern, '$ &');
textmsg.innerhtml = newText;
);

Como puede ver, hemos resaltado con éxito el texto en el párrafo que se busca en el cuadro de entrada:

Eso se trataba de resaltar el texto en JavaScript.

Conclusión

Para resaltar el texto en JavaScript, use el "marcaElemento/etiqueta en la etiqueta o el archivo JavaScript. En este artículo, hemos proporcionado ejemplos detallados adecuadamente para resaltar el texto en JavaScript. Dimos un ejemplo de resaltado de texto con codificación dura, así como resaltar o seleccionar texto por el valor enviado por el usuario.