BEGIN ARTICLE

Recherche/modification de texte dans une page

Génération de liens ciblés sur des mots-clés

Introduction - Objectif final

L'objectif est de remplacer automatiquement "mot-clé" par <a href="/link/to/ref-mot-cle">mot-clé</a>.
Par "automatiquement", j'entends: applicable sur une page quelconque sans avoir à la modifier.
Ci-desous, des éléments en javascript qui le permettent.

Recherche et remplacement de texte

Pour chercher et remplacer un texte on peut utiliser la méthode javascript replace.
La méthode replace cherche un texte, ou une expression régulière, et retourne un texte dans lequel le texte spécifié a été remplacé.
Voir par exemple replace method.

Ci-dessous le code html/javascript derrière le cadre précédent:

<div id="SearchNReplaceText">
Pour chercher et remplacer un texte on peut utiliser la méthode 
javascript replace. 

La méthode replace cherche un texte, 
ou une expression régulière, et retourne un texte dans lequel 
le texte spécifié a été remplacé. 
Voir par exemple 
<a href="https://www.w3schools.com/jsref/jsref_replace.asp">replace method</a>. 
<button onclick="SearchNReplace();">Correction: pas "texte" mais "cha&icirc;ne de caractères"</button<
</div>


<script>
function SearchNReplace() {
  text=document.getElementById('SearchNReplaceText');
  text.innerHTML=text.innerHTML.replace(/texte/g,"cha&icirc;ne de caractères");
}
</script>

Un problème éventuel (et néanmoins majeur !) avec cette méthode est le suivant: si la chaîne de caractères recherchée se trouve par exemple dans une adresse <a href="www.https://xymaths.fr/texte/…">. Après remplacement, le lien pointera vers une adresse erronée (à moins que l'adresse ne soit valide aussi avec la chaîne de caractère remplacée).
Plus généralement, si la chaîne de caractères se trouve dans une balise html, par exemple <div id="id-texte">, la structure même du DOM risque d'être endommagée.
Pire encore, si le mot clé recherché/remplacé est par exemple "div", "span", …, ou encore présent dans un script: la page s'en trouve alors endommagée et peut ne plus être fonctionnelle.

Texte recherché en surbrillance (highlight text)

L'objectif ici est de rechercher dans une page, un texte, ou une partie comme c'est le cas ici, les occurences d'une chaîne de caractères et de les surligner.
En fait, par rapport au paragraphe précédent, on recherche et remplace du texte par lui même et enrichi: on ajoute ou modifie le style css.
Pour mettre du texte en surbrillance, on utilise la propriété css "background-color".

Ci-dessous le code html/css/javascript derrière le cadre précédent:

<div id="HighLightMeText">
L'objectif ici est de rechercher dans une page, 
un texte, ou une partie comme c'est le cas ici, les occurences d'une 
chaîne de caractères et de les surligner. <br>
En fait, par rapport au paragraphe précédent,  
on recherche et remplace du texte par lui même 
et enrichi: on ajoute ou modifie le style css. <br>
Pour mettre du texte en surbrillance, 
on utilise la propriété css "background-color".  
<br>
<button onclick="HighLighText();">Show me "text"</button>
</div>

<script>
function HighLighText() {
  text=document.getElementById('HighLightMeText');
  newtext="<span style=\"background-color:yellow\">text</span>";
  text.innerHTML=text.innerHTML.replace(/text/g,newtext);
}
</script>

Info-bulle et lien

Info-bulle statique

Deux éléments maintenant: afficher du texte sous la forme d'"info-bulle" au-dessus d'un mot spcifique du texte Avec le css/html:

.info{position:relative;display:inline;}
.info-txt{display:block;
  position:absolute;bottom:1.6em;left:1em;width:200px;
  color:#000000;
  padding:5px;
  font-size:10px;
  background-color:#ffffe1;
  border:1px solid #000000;}
.helpthere{cursor:help;border-bottom:2px dashed green}

Du texte, 
<div class="helpthere info">
un mot-clé&hellip;
<div class="info-txt" style="display:block">
Un peu d'aide<br>
ou autre information<br>
et pourquoi pas <a href="#Info-bulle">un lien</a>
</div></div>

On obtient: Du texte,

un mot-clé…

Un peu d'aide
ou autre information
et pourquoi pas un lien

et la suite du texte …

Voir aussi, un autre exemple d'info-bulle en css

Info-bulle dynamique

Il est interessant, souvent, de n'afficher ce type d'aide / info-bulle que lorsque le lecteur le souhaite, par exemple lorsque sa souris survol dans le texte le mot ciblé ou qu'il clique explicitement dessus.

Affichage au passage de la souris `onmouseover` et `onmouseout`

Deux méthodes sont disponibles onmouseover et onmouseout qui explicite le comportement respectivement lorsque le curseur de la souris survole la zone sous la balise concernée et lorsque le curseur quitte cette zone.
Pour les utiliser, à partir de ce qui précède, on peut:

écrire le texte et son info-bulle rigoureusement comme précédemment
attribuer initialement un style "display:none" au contenu de l'info: celui-ci ne sera donc pas affiché
ajouter le traitement des deux événements onmouseover et onmouseout à la balise environnente qui repose sur un court script javascript changeant la propriété display

<script>
function showtip(aide) {
 if (aide.style.display == "none") {aide.style.display = "block";}
 else {aide.style.display = "none";}
}
</script>

du texte, &hellip; 
<div class="helpthere info" 
onmouseover="javascript:showtip(document.getElementById('AA'));" 
onmouseout="javascript:showtip(document.getElementById('AA'));">mot-cle
<div class="info-txt" id="AA" style="display:none">Affichage seulement<br>lors du survol
</div></div>
et la suite du texte&hellip;

ce qui permet d'obtenir: du texte, … et la suite du texte…

Affichage au click: `mouseclick`

On peut aussi utiliser la méthode onclick à la place des onmouseover et onmouseout, ce qui peut notamment être appréciable pour les technologies mobiles et (surtout) tactiles pour lesquelles la notion de survol du curseur de la souris n'a pas de sens.

du texte, &hellip; 
<div class="helpthere info" 
onclick="javascript:showtip(document.getElementById('BB'));">mot-cle
<div class="info-txt" id="BB" style="display:none">Affichage seulement<br>lors du survol
</div></div>
et la suite du texte&hellip;

ce qui permet d'obtenir: du texte, …

mot-cle

et la suite du texte…

Combinaison: click et survol

On peut aussi combiner les deux méthodes, pour réagir aussi bien au click qu'au survol de la souris, par exemple:

<script>
ck=0
function showtipClick(aide) {
  if (ck==0) {
    ck=1;
    aide.style.display = "block";
  }
  else {
    ck=0;
    aide.style.display = "none";
  }
}
function showtipClickNOverOut(aide) {
  if (ck==0) {
    if (aide.style.display == "none") {aide.style.display = "block";}
    else {aide.style.display = "none";}
  }
}
</script>

Pour obtenir: du texte, &hellip; 
<div class="helpthere info" 
onclick="javascript:showtipClick(document.getElementById('CC'));"
onmouseover="javascript:showtipClickNOverOut(document.getElementById('CC'));" 
onmouseout="javascript:showtipClickNOverOut(document.getElementById('CC'));">mot-cle
<div class="info-txt" id="CC" style="display:none">Affichage seulement<br>lors du survol
</div></div>
et la suite du texte&hellip;

Pour obtenir: du texte, … et la suite du texte…

----------------------------------------------------------

<div id="Div1">text; mot-cle; texte encore</div>
et du texte à nouveau, hors "div", avec mot-cle

<button onclick="replaceinnerHTML();">replace aa(1)</button>
<script>
function replaceinnerHTML() {
Text=document.getElementById('Div1');
Text.innerHTML=Text.innerHTML.replace(/aa/g,"ZZ");
}
</script>

qui s'affiche en

text; mot-cle; aa texte encore
et encore mot-cle

et du texte à nouveau, hors "div", avec mot-cle

<div id="Div1">text; mot-cle; texte encore</div>
et du texte à nouveau, hors "div", avec mot-cle

aaa bbb

* zaaz

* waaw to_nowhere_link

Avec `textContent`

aaa bbb

* zaaz

* waaw to_nowhere_link

For textContent see textContent on w3scools for example… Explicitement:

"The textContent property sets or returns the textual content of the specified node, and all its descendants.
If you set the textContent property, any child nodes are removed and replaced by a single Text node containing the specified string."

L'utilisation de textContent doit ici se limiter à manipuler du texte pur: à l'intérieur de balise et sans contenir de balises.

DOM

Le html

<div id="forDOMprintingPurpose">
  <div>Une liste: 
    <ul>
      <li>non ordonnée</li>
      <li>"<code>ul</code>": <b>U</b>nordered <b>L</b>ist</li>
    </ul>
  </div>
  Texte hors div mais <span style="color:blue">en bleu</span>
  <br>
  et un <a href="/to/nowwhere/">lien fictif</a>
</div>

<br>
Affichage de l'arborescence DOM locale:
<div  id="dispTree"></div>

<br><br>

Et affichage du texte brut extrait:
<br>
<div id="dispText"></div>

allié à son javascript:

<script>
ouTree=document.getElementById('dispTree');
ouText=document.getElementById('dispText');

function throughDOMTree(currentElement, level) {
  if (currentElement) {
    var currenTag=currentElement.tagName;
    if (currentElement.nodeName) {ouTree.innerHTML+="<br>";
      for (j=0; j<level; j++) {ouTree.innerHTML+="   ";}
	ouTree.innerHTML+="<"+currentElement.nodeName+">";}
    // On extrait ici le texte brut: 
    if (currentElement.nodeName=="#text") {ouText.textContent+=currentElement.textContent;}
    var i=0;var currentElementChild=currentElement.childNodes[i];
    while (currentElementChild) {
      throughDOMTree(currentElementChild, level+1);
      i++;currentElementChild=currentElement.childNodes[i];
    }
    if (currenTag) {ouTree.innerHTML+="<br>";
      for (j=0; j<level; j++) {ouTree.innerHTML+="   ";}
      ouTree.innerHTML+="&lt;/"+currenTag+"&gt;";
    }
  }
}

// Et quelques exemples d'uilisation
//currentElement=document.body;
//currentElement=document.getElementsByTagName("article")[0];
currentElement=document.getElementById('forDOMprintingPurpose');
throughDOMTree(currentElement, 1);
</script>

Affichage complet:

Une liste:

non ordonnée
"ul": Unordered List

Texte hors div mais en bleu
et un lien fictif

Affichage de l'arborescence DOM locale:

Affichage du le texte brut extrait: