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
La méthode
Voir par exemple replace method.
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 javascriptreplace
.
La méthodereplace
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îne de caractères"</button< </div>
<script> function SearchNReplace() { text=document.getElementById('SearchNReplaceText'); text.innerHTML=text.innerHTML.replace(/texte/g,"chaî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é
Ci-dessous le code html/css/javascript derrière le cadre précédent:
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
".
<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é… <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é…
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
etonmouseout
à 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, … <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…
mot-cle
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, … <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…
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, … <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…
mot-cle
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>
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 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
Avec textContent
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
Lehtml
<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>
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+="</"+currenTag+">"; } } } // Et quelques exemples d'uilisation //currentElement=document.body; //currentElement=document.getElementsByTagName("article")[0]; currentElement=document.getElementById('forDOMprintingPurpose'); throughDOMTree(currentElement, 1); </script>
Affichage complet:
Affichage de l'arborescence DOM locale:
Affichage du le texte brut extrait: