regexp et actualisation de la page

ephleim · 16/01/2012, 22h53

Bonjour, je souhaite faire des remplacement dynamiques en javascript par un plugin et j'ai essayé le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function() 
{ 
	reg = new RegExp("petite","gim");
 	document.body.innerHTML = document.body.innerHTML.replace(reg, "grande"); 
});

cela correspond bien à ce que je recherche mais j'ai remarqué plusieurs problèmes :
1. Quand je laisse le plugin, mes pages ont des problèmes d'affichage, par exemple les champs de saisie n'affichent plus les modifications qu'on leur fait.
2. Comment puis je faire pour lui dire de chercher plusieurs mots ?

En vous remerciant par avance,

Ephleim

SpaceFrog · 17/01/2012, 08h37

Citation:

les champs de saisie n'affichent plus les modifications qu'on leur fait.

???

Pour le remplacement de plusieurs mots, soit tu le fais dans une boucle sur un array ou alors consituter une reg avec l'operateur or | entre des groupes de caractères entre ( )

Par contre remplacer le innerHMTL, ça veut dire aussi remplacer dans le code html ...
Ne serait il pas plus intéressant de ne faire le remplacement que sur le .text() ?

ephleim · 17/01/2012, 09h16

Je vais essayer d'utiliser le remplacement en utilisant les | pour le regexp, je vous tiens au courant dès que j'ai pu tester.

Par contre j'ai testé le code suivant, qui ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function() 
{ 
	reg = new RegExp("petite","gim");
 	document.body.text(document.body.text().replace(reg, "grande")); 
});

J'ai l'impression que le problème est peut-être qu'il faudrait parcourir toutes les balises, je vais essayer d'utiliser un each et je vous tiens au courant.

SpaceFrog · 17/01/2012, 09h28

j'ai l'impression qu tu utilises jQuery en pointillés ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type='text/javascript'>
 $(function(){
	reg = new RegExp("petite","gim");
	replacement= $("body").html().replace(reg,'grande');
 
 	$('body').html(replacement); 
})
 </script>
    <style type="text/css">
 
</style>
</head>
<body>
Une petite page d'essai
<input type="text" name="petite" value="" />
</body>
</html>

le souci est que cela remplacera aussi le texte à l'intérieur des tags ...

De plus JQuery ne gère pas les textNodes comme des balises span p ou div contenant du texte ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <title>Nouvelle page 1</title>
<script type='text/javascript'>
 $(function(){
	$('body').contents().each(function () { 
 
	if ($(this)[0].nodeType === 3 ) {
		$(this).replaceWith( $(this).text().replace( /petite/gi,'GRANDE'))
		}
	else {
	 	if($(this).text().length>0){
        		$(this).text( $(this).text().replace( /petite/gi,'GRANDE') ); 
      	}
 	}
   });
})
 </script>
    <style type="text/css">
 
</style>
</head>
<body>
un petite phrase en textNode 
<p>
Une petite page d'essai
</p>
<input type="text" name="petite" value="" />
</body>
</html>

Dans ce second code, le name petite reste inchangé

ephleim · 17/01/2012, 14h07

C'est vrai que je suis vraiment novice en javascript, alors distinguer les syntaxes jQuery des syntaxes Javascript n'est pas du tout instinctif chez moi

j'ai pu suivre tes conseils pour rechercher plusieurs mots clef en même temps, ça marche très bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() 
{ 
		var MonTableau = new Array();
		MonTableau["petite"] = "little";
		MonTableau["grande"] = "big";
 
		var reg = new RegExp("petite|grande","gim");
		$('body').html($('body').html().replace(reg, function(a)
		{
				return MonTableau[a.toLowerCase()];
		})); 
});

Par contre j'ai toujours le problème du rafraichissement des champs de saisie qui ne se fait plus (je pense que il doit y avoir une boucle qui se met en place, du genre que le remplissage de $('body').html(... rafraichi la pge qui rerempli $('body').html(... Est ce que ça pourrait-être cela mon problème ?

J'ai essayé ton autre suggestion, avec le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() 
{ 
		var MonTableau = new Array();
		MonTableau["petite"] = "little";
		MonTableau["grande"] = "big";
 
		var reg = new RegExp("petite|grande","gim");
 
	$('body').contents().each(function () { 
 
	if ($(this)[0].nodeType === 3 ) {
		$(this).replaceWith( $(this).text().replace( /little/gi,'big'))
		}
	else {
	 	if($(this).text().length>0){
        		$(this).text( $(this).text().replace( /little/gi,'big') ); 
      	}
 	}
   });
});

Mais cela m'affiche une page sans balise, avec tout les textes de la page à la suite. Je ne sais pas si tu aurais une autre idée ?

En tout cas merci de ton aide précieuse !

ephleim · 20/01/2012, 16h38

Bon, j'ai un peu avancé et j'ai compris dans quel cas de figure ma texte box était bloquée. En fait elle se bloque uniquement s'il s'agit de la texte box de recherche de google. Tout les autres tests marche bien, et Bing aussi.
Je ne sais pas pourquoi google se bloque (même quand aucun remplacement n'est réellement fait d'ailleurs). Si quelqu'un à une idée je suis intéressé.

Ce simple script ajouté à la fin d'une page google suffit à reproduire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function() 
{ 
	$('body').html($('body').html());
});

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email