Comment mettre du texte en surbrillance à l'aide de javascript

Question

Quelqu'un peut-il m'aider avec une fonction javascript qui peut mettre en évidence du texte sur une page web. L'exigence est de ne mettre en évidence qu'une seule fois, et non pas de mettre en évidence toutes les occurrences du texte comme nous le faisons dans le cas d'une recherche.

Answer 1

En 2019, l'API Web prend désormais en charge de manière native la mise en évidence des textes :

const selection = document.getSelection();
selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);

Et vous êtes prêt à partir ! anchorNode est le nœud de départ de la sélection, focusNode est le nœud de fin de sélection. Et, si ce sont des noeuds de texte, offset est l'indice du caractère de début et de fin dans les nœuds respectifs. Voici l'indice documentation

Ils ont même un Démonstration en direct

Answer 2

Il suffit de passer votre mot dans le champ suivant fonction :

function highlight_words(word) {
    const page = document.body.innerHTML;
    document.body.innerHTML = page.replace(new RegExp(word, "gi"), (match) => `<mark>${match}</mark>`);
}

Utilisation :

highlight_words("hello")

Cela mettra en évidence toutes les occurrences du mot sur la page.

Answer 3

J'ai trouvé mettre en évidence est la meilleure solution, car il permet de mettre en évidence les éléments suivants partie du contenu :

$('li').highlight('bla') ;

Answer 4

J'aimerais en dire plus sur l'utilisation de la fragment de texte défilant

la syntaxe : #:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Exemple

Lien vers la démo

#:~:text=to

Comment mettre du texte en surbrillance à l'aide de javascript

#:~:text=to,text

Comment mettre du texte en surbrillance à l'aide de javascript

#:~:text=tex-,t

Comment mettre du texte en surbrillance à l'aide de javascript

#:~:text=text-,using,-javascript

Comment mettre du texte en surbrillance à l'aide de javascript

Si vous voulez mettre en évidence fragments de texte multiples dans une seule URL ( &text= )

Exemple

Lien vers la démo

#:~:text=javascript&text=highlight&text=Ankit

Comment mettre du texte en surbrillance à l'aide de javascript

voir plus : https://web.dev/text-fragments/#textstart

Answer 5

Je pense que ce code est meilleur car il met en évidence tous les caractères répétés.

function highlight(text) {
  var inputText = document.getElementById("inputText");
  var innerHTML = inputText.innerHTML;
  var index = innerHTML.indexOf(text);
  if (index >= 0) { 
     inputText.innerHTML=innerHTML.split(text).join('<span class="highlight">'+text+'</span>');
  }
}

.highlight {
  background-color: yellow;
}

<button onclick="highlight('fox')">Highlight</button>

<div id="inputText">
  The fox went over the fence fox fox fox wen fox
</div>