Comment mettre en surbrillance le texte à l'aide de JavaScript

Lors du développement de sites Web dynamiques, les développeurs doivent souvent mettre en évidence le texte sur une page Web pour souligner tout texte ou information. La mise en évidence du texte est une fonctionnalité très utile qui aide les utilisateurs à se concentrer sur le texte ou les informations particulier.

Cet article décrira la procédure de mise en évidence du texte en javascript.

Comment mettre en surbrillance le texte à l'aide de JavaScript?

Pour mettre en évidence le texte en JavaScript, utilisez le «marquer”Element / Tag dans la balise ou le fichier javascript. Il est utilisé avec des méthodes JavaScript prédéfinies, telles que le «innerhtml«Attribut, et le«getElementByid ()" méthode. Voyons quelques exemples à comprendre.

Exemple 1: mettez en surbrillance le texte du code dur

Dans cet exemple, nous ajouterons le texte sur la page Web dynamiquement et le mettrons en surbrillance. À cette fin, créez d'abord un

élément dans un fichier html en attribuant un ID "texte»:

Maintenant, dans la balise, d'abord, obtenez le

élément utilisant son identifiant attribué à l'aide de "getElementByid ()" méthode. Ensuite, utilisez le "innerhtml»Attribut pour ajouter le texte sur la page Web. Pour mettre en évidence le texte spécifié, ajoutez-le entre le «" étiqueter:

document.getElementByid ("texte").innerhtml = "Learn javascript de LinuxHint";

Sortir

Exemple 2: mettez en surbrillance le texte sur le temps d'exécution (spécifié par l'utilisateur)

Ici, nous mettrons en évidence le texte du paragraphe donné qui sera entré par l'utilisateur. À des fins correspondantes, ajoutez un texte dans un fichier html dans un

Tag avec un ID "message»:

Linuxhint est une excellente ressource pour apprendre sur Linux et les logiciels open source connexes. Il propose également de nombreux tutoriels et guides sur différents langages de programmation, tels que Java, Python, HTML, CSS, JavaScript, etc. Linuxhint fournit des informations simples, claires et authentiques.

Créez un champ de saisie pour la recherche de texte pour mettre en surbrillance dans le paragraphe:

Maintenant, dans la balise ou dans le fichier JavaScript, accédez au paragraphe et au champ de texte en utilisant leurs ID attribués à l'aide de la méthode «GetElementById ()»:

const ixtmsg = document.getElementById ('message');
const highlightText = document.getElementById ('highlightText');

Utilisez le "addEventListener ()”Méthode qui recherchera la valeur entrée dans le paragraphe et la mettra en surbrillance. À cette fin, utilisez une expression régulière pour trouver tout le texte qui correspond au mot ou à la phrase recherché. Pour mettre en surbrillance le texte correspondant, utilisez la balise:

texte surligné.addEventListener ('input', (événement) =>
const TextSearch = événement.cible.valeur;
const regexpattern = new regexp (textSearch, 'gi');
LET Text = TextMsg.innerhtml;
texte = texte.remplacer (/ (|) / gim, ");
const newText = texte.remplacer (regexpattern, '$ &');
textmsg.innerHtml = newText;
);

Comme vous pouvez le voir, nous avons réussi à mettre en évidence le texte dans le paragraphe qui est recherché dans la zone d'entrée:

Il s'agissait de mettre en évidence le texte en javascript.

Conclusion

Pour mettre en évidence le texte en JavaScript, utilisez le «marquer”Element / Tag dans la balise ou le fichier javascript. Dans cet article, nous avons fourni des exemples correctement détaillés pour mettre en évidence le texte en JavaScript. Nous avons donné un exemple de mise en évidence de texte à code dur ainsi que de mettre en surbrillance ou de sélection du texte par la valeur intentée par l'utilisateur.