Rechercher-remplacer en Javascript

**olivierSG** · 27/08/2010, 12h31

Bonjour,

Totalement néophyte en Javascript, j'ai besoin de réaliser un petit utilitaire de conversion très simple :
à partir du texte récupéré d'un champ de texte, il doit effectuer un nombre relativement important de rechercher-remplacer (prédéterminés) très simples et restituer le résultat dans le champ de départ (ou un autre).
Comme ça doit fonctionner sur n'importe quelle plateforme, la réponse la plus pertinente me semblait être une page html avec un peu de Javascript.
J'ai donc farfouillé un peu sur Internet et j'ai écrit ceci :

Code :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Convertisseur SGEcole</title>
</head>
 
<body>
<script type="text/javascript">
// string_replace.jsl
public class Program
{
    public static void main(String[] args)
    {
        String str = "The quick brown fox jumps over the lazy dog.";
 
        // Ajouter l'accroche au T.
        String newStr = str.replace('T', 'T*');
 
        // Display the strings for comparison.
        document.write("old = " + str);
        document.write("new = " + newStr);
    }
}
/*
Output:
old = The quick brown fox jumps over the lazy dog.
new = T*he quick brown fox jumps over the lazy dog.
*/
</script> 
</body>
</html>

Le problème, c'est que ça ne m'affiche rien : où est le bug ?
Question subsidiaire : comment extraire le contenu d'un champ créé en HTML pour l'utiliser dans le traitement ? et comment le remettre dedans, après ?

En partant de quelque chose comme ça :

Code html :

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

1
2
3
4
5
<body>
<form>
<textarea name="aireDeTexte" cols="400" rows="40">Saisissez ou collez ici votre texte</textarea>
<input type="button" value="Rechercher / Remplacer" onClick="chercheRemplace( this.form.aireDeTexte.value, this.form.aireDeTexte )">
</form>

Merci pour votre aide.

**SpaceFrog** · 27/08/2010, 12h37

tu ne serais pas en train de confondre java et javascript ?

**olivierSG** · 27/08/2010, 12h49

Envoyé par SpaceFrog

tu ne serais pas en train de confondre java et javascript ?

Ben, on m'a dit exactement la même chose sur le forum Java ! Et apparemment, ils pensent que Javascript est plus adapté pour mon besoin.

C'est très possible en effet que je me sois mélangé les pinceaux. Ce que j'ai écrit dans mon <script type="text/javascript">, c'est du Java, pas du Javascript, c'est ça ?

Est-ce que ceci fonctionnerait mieux ?

Code :

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

1
2
3
4
var aRemplacer = /\+/g;
var machaine = "le+petit+chat+noir+est+malade"
machaine = machaine.replace(aRemplacer, " ")
alert (machaine);

Et comment le modifier, sachant que je voudrais extraire machaine d'un champ accessible à l'utilisateur et renvoyer le contenu dans un champ (éventuellement le même) où l'utilisateur pourra le recopier, et non dans un message d'alerte ?

Merci pour vos réponses.

**SpaceFrog** · 27/08/2010, 15h03

Oui ton code entre balises était du java.
Oui le nouveau code est du javascript .

tu veux que l'utilisateur entre un texte, tu le moulines et tu le resitutes ?

un input type text ou un textarea et un input type button suffiront

Code :

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

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/\+/g+,' ')
}
</script>
 
<input type='text' id='motxt' value='' />
<input type='button'  value='go' onclick="foo('montxt')" />

**olivierSG** · 27/08/2010, 16h07

Envoyé par SpaceFrog

Oui ton code entre balises était du java.
Oui le nouveau code est du javascript .

tu veux que l'utilisateur entre un texte, tu le moulines et tu le restitues ?

'zactement.

Envoyé par SpaceFrog

un input type text ou un textarea et un input type button suffiront

Je préfère un textarea.

Envoyé par SpaceFrog

Code :

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

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/\+/g+,' ')
}
</script>
 
<input type='text' id='motxt' value='' />
<input type='button'  value='go' onclick="foo('montxt')" />

Ça a l'air de marcher. J'approfondis et je vous tiens au courant.

Merci beaucoup.

**olivierSG** · 01/09/2010, 14h48

Envoyé par SpaceFrog

Oui ton code entre balises était du java.
Oui le nouveau code est du javascript.

tu veux que l'utilisateur entre un texte, tu le moulines et tu le restitues ?

un input type text ou un textarea et un input type button suffiront

Code :

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

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/\+/g+,' ')
}
</script>
 
<input type='text' id='motxt' value='' />
<input type='button'  value='go' onclick="foo('montxt')" />

OK. Donc j'ai écris ceci, qui fonctionne :

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
 
<body>
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/TexteARemplacer1/g,'TexteDeRemplacement1')
bar.value=bar.value.replace(/TexteARemplacer2/g,'TexteDeRemplacement2')
[...]
bar.value=bar.value.replace(/TexteARemplacerX/g,'TexteDeRemplacementX')
}
</script>
 
<input type='text' id='motxt' value='' />
<input type='button'  value='go' onclick="foo('motxt')" />
</body>
</html>

Maintenant, ce que je voudrais, c'est effectuer les mêmes traitements, mais à partir de et vers un textarea aimablement fourni par un collègue, et défini sur Dreamweaver comme ceci :

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
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Convertisseur</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:47px;
	top:72px;
	width:581px;
	height:120px;
	z-index:1;
	background-color: #FFFFFF;
	font-size: 36px;
	font-family: "MaFonte";
}
body {
	background-color: #FFFFFF;
}
</style>
</head>
 
<body>
<div id="apDiv1">
  <form id="form1" name="form1" method="post" action="font-family:Caflisch Script, Adobe Poetica, Sanvito, cursive;}">
    <pre><label for="MaFonte"></label><textarea name="MaFonte" id="MaFonte" cols="45" rows="5"></textarea>  </pre>
  </form>
</div>
</body>
</html>

Comment puis-je faire ? J'ai besoin d'un textarea pour pouvoir tenir compte, notamment d'éléments comme des retours chariots, des tabulations, dans mon traitement.

Question pour aller plus loin :
Idéalement, je voudrais pouvoir réduire mon interface à un bouton, les traitements s'effectuant depuis et vers le presse-papier, pour que ce soit le plus transparent possible pour l'utilisateur. Est-ce possible ? Est-ce conseillé ?
Comment faire ?

Merci en tout cas, pour l'aide précieuse déjà fournie.

**SpaceFrog** · 01/09/2010, 15h08

tu as une fonction, à la quelle tu passes un id ...

ton textarea a un id ...

**olivierSG** · 03/09/2010, 13h07

Envoyé par SpaceFrog

tu as une fonction, à la quelle tu passes un id ...

ton textarea a un id ...

Apparemment, j'ai compris.

Donc, j'ai écris ça :

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
36
37
38
39
40
41
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Convertisseur</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:47px;
	top:72px;
	width:100px;
	height:120px;
	z-index:1;
	background-color: #FFFFFF;
	font-size: 36px;
	font-family: "MaFonte";
}
body {
	background-color: #FFFFFF;
}
</style>
</head>
 
<body>
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/chaineARemplacer/g,'chaineDeRemplacement')
...
}
</script>
 
<div id="apDiv1">
  <form id="form1" name="form1" method="post" action="font-family:Caflisch Script, Adobe Poetica, Sanvito, cursive;}">
    <pre><label for="MaFonte"></label><textarea name="MaFonte" id="MaFonte" cols="100" rows="40"></textarea>  </pre>
  </form>
</div>
<input type='button'  value='go' onclick="foo('MaFonte')" />
</body>
</html>

Sauf que... ça marche nickel sur Mac, sur PC en Windows 7...
pas sur PC en Windows XP

.
Y a un problème avec le charset=UTF-8 sous XP ?
ou un bug dans mon script ?

Deuxième question, est-il possible d'exécuter les mêmes traitements, mais en partant du presse-papier et en renvoyant vers celui-ci ; est-ce que ça marchera de la même façon sur toutes les plate-formes ou est-ce qu'il vaut mieux m'en tenir à ce qui marche à partir d'un champ de ma page HTML ?
Si oui, comment faire ?

Merci pour toutes vos réponses, qui m'ont bien servi.

**SpaceFrog** · 03/09/2010, 13h30

Plus que curieux ???
Habituellement ce sont plutot les différences de navigateur et de versions qui posent souci, pas d'OS

le fichier lui même est il en format utf-8 ?

sinon je ne vois pas de raison particulière ...

**olivierSG** · 03/09/2010, 15h49

Envoyé par SpaceFrog

Plus que curieux ???
Habituellement ce sont plutot les différences de navigateur et de versions qui posent souci, pas d'OS

le fichier lui même est il en format utf-8 ?

sinon je ne vois pas de raison particulière ...

Non, ça y est, j'ai compris, c'est Internet Explorer sur PC, un peu parano, qui bloquait l'exécution du fichier si on l'ouvrait depuis le disque (alors qu'il l'accepte si on ouvre depuis un serveur extérieur, va comprendre, Charles).

Donc, ça marche.

Et pour ma deuxième question concernant le presse-papier, sans abuser ?

Merci encore.

**SpaceFrog** · 03/09/2010, 15h55

ou ...

**olivierSG** · 03/09/2010, 16h02

Envoyé par SpaceFrog

ou ...

Euh... Pas compris. J'ai pêché contre la Netiquette, là ?

**SpaceFrog** · 03/09/2010, 16h25

Deuxième question, est-il possible d'exécuter les mêmes traitements, mais en partant du presse-papier et en renvoyant vers celui-ci ; est-ce que ça marchera de la même façon sur toutes les plate-formes ou est-ce qu'il vaut mieux m'en tenir à ce qui marche à partir d'un champ de ma page HTML ?
Si oui, comment faire ?

=> réponse ou

**olivierSG** · 06/09/2010, 10h13

Envoyé par SpaceFrog

Envoyé par olivierSG

Deuxième question, est-il possible d'exécuter les mêmes traitements, mais en partant du presse-papier et en renvoyant vers celui-ci ; est-ce que ça marchera de la même façon sur toutes les plate-formes ou est-ce qu'il vaut mieux m'en tenir à ce qui marche à partir d'un champ de ma page HTML ?
Si oui, comment faire ?

=> réponse ou

Comme je suis têtu, j'ai essayé quand même, j'ai cherché un peu et écris ceci :

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
36
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Convertisseur</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:47px;
	top:72px;
	width:100px;
	height:120px;
	z-index:1;
	background-color: #FFFFFF;
	font-size: 36px;
	font-family: "Ma Fonte";
}
body {
	background-color: #FFFFFF;
}
</style>
</head>
 
<body>
<script type='text/javascript'>
function foo(obj){
bar=document.getElementById(obj)
bar.value=bar.value.replace(/^a/g,'$a')
[...]
}
copier = function()
{
  var oTextRange = document.getElementById('SGEcole').createTextRange();
  oTextRange.execCommand('copy');
}</script>
 
<div id="apDiv1">
  <form id="form1" name="form1" method="post" action="font-family:Caflisch Script, Adobe Poetica, Sanvito, cursive;}">
    <pre><label for="MaFonte"></label><textarea name="MaFonte" id="SGecole" cols="100" rows="40"></textarea>  </pre>
  </form>
</div>
<input type='button'  value='go' onclick="foo('MaFonte')"/>
<input type='button'  value='copier' onclick="copier(MaFonte)"/>
</body>
</html>

Mais ça ne marche pas... (j'ai fait deux boutons séparés pour tester, mais je n'en voudrais qu'un seul, je ne sais pas comment ajouter deux fonctions sur le onclick).

Est-il correct de poster dans la suite de ce fil ou vaut-il en créer un nouveau ?

Merci

Rechercher-remplacer en Javascript

JavaScript

Discussions similaires

Partager

Partager