Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

replace produit un effet diff

16 réponses
Avatar
scalpa
Bonjour
Je modifie un texte contenu dans un textarea avec replace de la fa=C3=A7on
suivante :
1) Je me prot=C3=A8de de l'injection de code malicieux avec la fonction
HTMLEncode ??? (vrai/faux?)
2) J'utilise la m=C3=A9thode replace
function HTMLEncode(wText) { //http://www.editeurjavascript.com/forum/
topic,2,39285,0.html
if (typeof(wText) !=3D=3D "string") {
wText =3D wText.toString();
}
wText =3D wText.replace(/&/g, "&");
wText =3D wText.replace(/"/g, """);
wText =3D wText.replace(/</g, "&lt;");
wText =3D wText.replace(/>/g, "&gt;");
wText =3D wText.replace(/'/g, "&#146;");
return wText;
}
var input_txt =3D
HTMLEncode(document.getElementById('inputText').value);
input_txt =3D input_txt.replace(/([\w=C3=A9=C3=A7=C3=A2=C3=AA=C3=AE=C3=B4=
=C3=BB=C3=A0=C3=A8=C3=B9=C3=AB=C3=AF=C5=93=C3=A6]+)(?=3D[\s=E2=80=89?'=E2=
=80=99".,;!
=E2=80=A6?=C2=AB=C2=BB\-(\)])/gi, '<span style=3D"color: blue;" class=3D"No=
selected"
onclick=3D"pick(this);">$1<\/span>');

3) J'affiche le r=C3=A9sultat dans un textarea apr=C3=A8s quelques replace =
car
je me suis aper=C3=A7us qu'ie mettait les balises color et span en
majuscules...automatiquement :
MonExo =3D MonExo.replace(/(pick)/gi, "verif");
MonExo =3D MonExo.replace(/(color:)/ig, "color:");
MonExo =3D MonExo.replace(/(color: red)/ig, "color: blue");
MonExo =3D MonExo.replace(/(span>)/ig, "span>");
MonExo =3D MonExo.replace(/(<span)/ig, "<span");

4) Avec FireFox le contenu du textarea est celui escompt=C3=A9:
exemple :
<span style=3D"color: blue;" class=3D"selected"
onclick=3D"pick(this);">votre</span>
<span style=3D"color: blue;" class=3D"Noselected"
onclick=3D"pick(this);">texte</span>
Mais dans ie des apostrophes disparaissent... :
<span style=3D"color: blue" class=3Dselected onclick=3Dpick(this);>votre</
span>
<span style=3D"color: blue" class=3DNoselected onclick=3Dpick(this);>texte<=
/
span>

Quelqu'un sait-il pourquoi? Faut-il utiliser une syntaxe particuli=C3=A8re?
J'ai essay=C3=A9 d'=C3=A9crire la regex entre simple ' ou double " apostrop=
hes,
d'ajouter des \ avant " etc... sans succ=C3=A8s.
merci
pascal

10 réponses

1 2
Avatar
Olivier Miakinen
Bonjour,

Le 24/04/2010 13:32, scalpa a écrit :

Je modifie un texte contenu dans un textarea avec replace de la façon
suivante :
1) Je me protède de l'injection de code malicieux avec la fonction
HTMLEncode ??? (vrai/faux?)



Faux.

Tant que tu restes du côté du navigateur, là où est éventuellement
exécuté du code JavaScript, tu n'as rien à craindre de l'exécution de
code malicieux. Inversement, quand une requête arrive sur le serveur,
tu ne dois pas compter sur JavaScript pour avoir nettoyé tout code
malicieux puisqu'un attaquant éventuel peut très bien avoir désactivé
JavaScript, ou l'avoir remplacé par du code à lui.

En conclusion : la protection doit se faire côté serveur exclusivement.

2) J'utilise la méthode [...]



Du coup je n'ai pas lu le reste, puisque c'est inutile.

Cordialement,
--
Olivier Miakinen
Avatar
scalpa
Bonjour

Merci, me voilà rassuré.
J'ai donc supprimé HTMLEncode
var input_txt = document.getElementById('inputText').value;
input_txt = input_txt.replace(/([wéçâêîô ûàèùëïœæ]+)(?=[s ?'⠀™".,;!
…?«»-()])/gi, '<span style="color: blue;" class="No selected"
onclick="pick(this);">$1</span>');

Mais les deux navigateurs se comportent encore comme avant.........
alors il doit y avoir un os quelque part?

Cordialement
Pascal
Avatar
SAM
Le 4/24/10 6:44 PM, scalpa a écrit :
J'ai donc supprimé HTMLEncode
var input_txt = document.getElementById('inputText').value;
input_txt = input_txt.replace(/([wéçâêîôûàèùëïœæ]+)(?=[s ?'’".,;!
…?«»-()])/gi, '<span style="color: blue;" class="Noselected"
onclick="pick(this);">$1</span>');

Mais les deux navigateurs se comportent encore comme avant.........



Je n'ai pas de différence entre Fx.3 et IE(6 et 7)
(les 2 OK comme pour Firefox)

alors il doit y avoir un os quelque part?



function modif() {
var input_txt = document.getElementById('inputText').value;
input_txt =
input_txt.replace(/([wéçâêîôûàèùëïœæ]+)(?=[s ?'’".,;!…?«»-()])/gi,'<span
class="Noselected" style="color:blue" onclick="pick(this)">$1</span>');
document.getElementById('inputText').value = input_txt;
}

le texte testé :
<http://www.scalpa.info/fr_conj_id_vrb1.php>

Cordialement
Pascal



Plutôt que de créer un code html tel que :

<div id="exo">
<span style="color: blue;"

préférer :

<div id="exo">
<span

et dans la FdS 'clicmot4.css' prévoir :

#exo { color: blue }

Ensuite dans le JS
on ne s'occupera plus du bleu qui est la couleur par défaut
il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'

#exo span.Selected { color: red; font-weight: bold }
#exo span.Noselected.green,
#exo span.Selected.green { color: green }

et pas besoin de
#exo span.Noselected { color: blue; font-weight: normal }
puisque :
#exo { color: blue; font-weight: normal }

à la correction il suffira d'ajouter la class 'green' aux mots voulus
leMot.style.className += ' green';
(un coup sélectionné et gras ou dé-sélectionné et non gras)

en variante :

#exo span.Selected { color: red; font-weight: bold }
#exo span.Noselected.green { color: black; font-weight: bold }
#exo span.Selected.green { color: green }

--
sm
Avatar
scalpa
Je n'ai pas de différence entre Fx.3 et IE(6 et 7)
(les 2 OK comme pour Firefox)

> alors il doit y avoir un os quelque part?



Moi, je suis sous ie8... c'est peut-être un bug de chez Microsoft?

Plutôt que de créer un code html tel que :

<div id="exo">
<span style="color: blue;"

préférer :

<div id="exo">
<span

et dans la FdS 'clicmot4.css' prévoir :

#exo { color: blue }

Ensuite dans le JS
on ne s'occupera plus du bleu qui est la couleur par défaut
il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'



Cela veut dire que comme les span sont inclus dans la div id=exo,
elles "héritent?" de son style blue?

#exo span.Selected { color: red; font-weight: bold }
#exo span.Noselected.green,
#exo span.Selected.green { color: green }



C'est une bonne idée de passer par les class. J'ai fait quelques
manipulations qui sont restées infructueuses : dans mon code les tests
de comparaison ne fonctionnaient pas sans que je puisse l'expliquer,
alors que les tests sur les styles marchaient (voir autre post)...
Je m'y remettrai plus tard.... là, les vacances se terminent..........

et pas besoin de
#exo span.Noselected { color: blue; font-weight: normal }
puisque :
#exo { color: blue; font-weight: normal }



Ah ben oui, c'est logique....

à la correction il suffira d'ajouter la class 'green' aux mots voulus
    leMot.style.className += ' green';
(un coup sélectionné et gras ou dé-sélectionné et non gras)

en variante :

#exo span.Selected { color: red; font-weight: bold }
#exo span.Noselected.green { color: black; font-weight: bold }
#exo span.Selected.green { color: green }

--
sm



Merci Stéphane pour cette relecture du code, toujours pleine d'idées
positives et astucieuses.
Cordialement
Pascal C
Avatar
scalpa
Tiens ce serait bien là qu'était le problème : tu proposes

leMot.style.className += ' green';



et moi j'essayais de faire :

leMot.className = ' green';



à voir et confirmer..........
Avatar
SAM
Le 4/25/10 10:27 AM, scalpa a écrit :
Tiens ce serait bien là qu'était le problème : tu proposes

>leMot.style.className += ' green';

et moi j'essayais de faire :

leMot.className = ' green';



à voir et confirmer..........



var c = 'selected';
quoi.className = quoi.className==c? c+' green' : c;

ou bien (selon ce qu'on veut en final):

var c = 'green';
quoi.className = quoi.className=='selected'? c : c+' selected';

ou :

var c = quoi.className;
quoi.className = c.indexOf('green')>=0? // classe 'green' est présente ?
c.replace('green','') : // oui? hop! supprimée
c+' green'; // sinon hop! ajoutée
// nettoyage dble espaces (facultatif)
quoi.className = quoi.className.replace(/ /g,' ');

ou :

#exo { color: blue }
selected { color: red; font-weight: bold }
.green { color: green }

var c = quoi.className;
quoi.className = c.indexOf('selected')>=0? // class 'selected' ?
'green' : // oui? hop! en vert seulement
c+' selected'; // sinon hop! ajoutée
// nettoyage dble espaces (facultatif)
quoi.className = quoi.className.replace(/ /g,' ');

Attention! l'ordre des déclarations dans la FdS est important
(green l'emportera car décrit après selected
donc inverser l'ordre si on veut rouge+gras qd le mot a été
sélectionné dé-sélectionné re-sélectionné)

démo : <http://cjoint.com/?ezmLDNWUpQ>

--
sm
Avatar
Bruno Desthuilliers
SAM a écrit :

il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'



Remplacer "<span style='color:red'>" par "<span class='red'>" n'apporte
rien du point de vue sémantique. Que l'élément soit affiché en rouge ou
en gris, on s'en fiche, ce qui compte (à ce niveau là), c'est de dire ce
qu'il a d'intrinsèquement spécifique.

NB : xpost & fu2 fr.comp.infosystemes.www.auteurs
Avatar
Bruno Desthuilliers
SAM a écrit :

il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'



Remplacer "<span style='color:red'>" par "<span class='red'>" n'apporte
rien du point de vue sémantique. Que l'élément soit affiché en rouge ou
en gris, on s'en fiche, ce qui compte (à ce niveau là), c'est de dire ce
qu'il a d'intrinsèquement spécifique.

NB : xpost & fu2 fr.comp.infosystemes.www.auteurs
Avatar
SAM
Le 4/26/10 9:47 AM, Bruno Desthuilliers a écrit :
SAM a écrit :

il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'



Remplacer "<span style='color:red'>" par "<span class='red'>" n'apporte
rien du point de vue sémantique. Que l'élément soit affiché en rouge ou



J'a rhien compris ... que vient faire la sémantique là-dedans ?
C'est à but visuel exclusivement.

en gris, on s'en fiche, ce qui compte (à ce niveau là), c'est de dire ce
qu'il a d'intrinsèquement spécifique.



Non, ici la difficulté est de "reconnaitre" *cette* spécificité (color)
et non pas le la "dire"

NB : xpost & fu2 fr.comp.infosystemes.www.auteurs



Oui, bon, c'est + un pb de JavaScript.


Le truc-machin fonctionne déjà avec une class attribuée (ou non)
aux tags span pour les différencier (et à l'écran aussi),
il ne devrait pas il y avoir à y rajouter un style

De plus, comme il faut reconnaitre la couleur (le foreground) du texte,
d'essayer de tester la valeur de element.style.color
va aller vers bien des déboires
car tous les navigateurs ne lisent pas cette couleur de la même façon,
il est alors plus simple de tester la class et, si elle existe, sa valeur.

Nota :
Les class, par
leur ordre de déclaration dans la FdS
et leur association dans l'élément visé,
vont permettre bien plus que d'ajouter/modifier un style
(en tous cas + facilement au niveau du JS tant dans la modification que
dans la reconnaissance de leurs présences dans le tag visé)

--
sm
Avatar
SAM
Le 4/26/10 9:47 AM, Bruno Desthuilliers a écrit :
SAM a écrit :

il n'y aura plus que le vert/rouge à voir
et en se servant des classes 'red' ou 'green' qui auront bien été
définies dans 'clicmot4.css'



Remplacer "<span style='color:red'>" par "<span class='red'>" n'apporte
rien du point de vue sémantique. Que l'élément soit affiché en rouge ou



J'a rhien compris ... que vient faire la sémantique là-dedans ?
C'est à but visuel exclusivement.

en gris, on s'en fiche, ce qui compte (à ce niveau là), c'est de dire ce
qu'il a d'intrinsèquement spécifique.



Non, ici la difficulté est de "reconnaitre" *cette* spécificité (color)
et non pas le la "dire"

NB : xpost & fu2 fr.comp.infosystemes.www.auteurs



Oui, bon, c'est + un pb de JavaScript.


Le truc-machin fonctionne déjà avec une class attribuée (ou non)
aux tags span pour les différencier (et à l'écran aussi),
il ne devrait pas il y avoir à y rajouter un style

De plus, comme il faut reconnaitre la couleur (le foreground) du texte,
d'essayer de tester la valeur de element.style.color
va aller vers bien des déboires
car tous les navigateurs ne lisent pas cette couleur de la même façon,
il est alors plus simple de tester la class et, si elle existe, sa valeur.

Nota :
Les class, par
leur ordre de déclaration dans la FdS
et leur association dans l'élément visé,
vont permettre bien plus que d'ajouter/modifier un style
(en tous cas + facilement au niveau du JS tant dans la modification que
dans la reconnaissance de leurs présences dans le tag visé)

--
sm
1 2