Code JavaScript pour surligner le texte

Cette fois, je vous apporte le code JavaScript pour surligner du texte. Quelles sont les précautions pour utiliser JavaScript pour surligner du texte. Voici des cas pratiques. .

Il existe de nombreuses bibliothèques tierces JQuery qui peuvent implémenter la fonction de surbrillance du texte, mais je préfère utiliser le petit morceau de code JavaScript suivant pour y parvenir fonction. Il est très court et peut être modifié de manière flexible en fonction de mes besoins, et je peux définir moi-même le style de surbrillance. Les deux fonctions suivantes peuvent vous aider à créer votre propre plug-in de surlignage de texte.

function highlight(text, words, tag) { 
  // Default tag if no tag is provided
  tag = tag || 'span'; 
  var i, len = words.length, re;  for (i = 0; i < len; i++) {    // Global regex to highlight all matches
    re = new RegExp(words[i], &#39;g&#39;);    if (re.test(text)) {
      text = text.replace(re, &#39;<&#39;+ tag +&#39; class="highlight">$&</&#39;+ tag +&#39;>&#39;);
    }
  } 
  return text;
}

Vous devrez également annuler la fonction en surbrillance :

function unhighlight(text, tag) {  // Default tag if no tag is provided
  tag = tag || &#39;span&#39;;  var re = new RegExp(&#39;(<&#39;+ tag +&#39;.+?>|<\/&#39;+ tag +&#39;>)&#39;, &#39;g&#39;);  return text.replace(re, &#39;&#39;);
}

Comment l'utiliser :

$('p').html( highlight(
    $('p').html(), // the text
    ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight
    'strong' // custom tag));

Je crois que vous maîtrisez la méthode après avoir lu C'est le cas dans cet article, pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autres articles connexes !

Lecture recommandée :

Extrait de code JavaScript pour déterminer si une date est valide

Explication détaillée de la boucle d'événement du nœud .js

File d'attente des tâches du mécanisme d'exécution JavaScript

Comment empêcher la page de formulaire dans Django de se soumettre automatiquement après rafraîchissant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!