replace produit un effet diff

Le
scalpa
Bonjour
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?)
2) J'utilise la méthode replace
function HTMLEncode(wText) { //http://www.editeurjavascript.com/forum/
topic,2,39285,0.html
if (typeof(wText) !== "string") {
wText = wText.toString();
}
wText = wText.replace(/&/g, "&");
wText = wText.replace(/"/g, """);
wText = wText.replace(/</g, "&lt;");
wText = wText.replace(/>/g, "&gt;");
wText = wText.replace(/'/g, "&#146;");
return wText;
}
var input_txt =
HTMLEncode(document.getElementById('inputText').value);
input_txt = input_txt.replace(/([wéçâêîô=
ûàèùëïœæ]+)(?=[s ?'â=
€™".,;!
…?«»-()])/gi, '<span style="color: blue;" class="No=
selected"
onclick="pick(this);">$1</span>');

3) J'affiche le résultat dans un textarea après quelques replace =
car
je me suis aperçus qu'ie mettait les balises color et span en
majusculesautomatiquement :
MonExo = MonExo.replace(/(pick)/gi, "verif");
MonExo = MonExo.replace(/(color:)/ig, "color:");
MonExo = MonExo.replace(/(color: red)/ig, "color: blue");
MonExo = MonExo.replace(/(span>)/ig, "span>");
MonExo = MonExo.replace(/(<span)/ig, "<span");

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

Quelqu'un sait-il pourquoi? Faut-il utiliser une syntaxe particulière?
J'ai essayé d'écrire la regex entre simple ' ou double " apostrop=
hes,
d'ajouter des avant " etc sans succès.
merci
pascal
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Olivier Miakinen
Le #21621561
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
scalpa
Le #21622071
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
SAM
Le #21623041
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é :

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
scalpa
Le #21624051
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
scalpa
Le #21624181
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..........
SAM
Le #21624961
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 :
--
sm
Bruno Desthuilliers
Le #21630331
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
Bruno Desthuilliers
Le #22037331
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
SAM
Le #21630711
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
SAM
Le #22037321
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
Publicité
Poster une réponse
Anonyme