cerhu > comp.lang.* > comp.lang.javascript

scalpa (24/04/2010, 13h32)
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, "’");
return wText;
}
var input_txt =
HTMLEncode(document.getElementById('inputText').va lue);
input_txt = input_txt.replace(/([\wéçâêîôûàèùëï?æ]+)(?=[\s??'?".,;!
??«»\-(\)])/gi, '<span style="color: blue;" class="Noselected"
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
majuscules...automatiquement :
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 " apostrophes,
d'ajouter des \ avant " etc... sans succès.
merci
pascal
Olivier Miakinen (24/04/2010, 15h05)
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,
scalpa (24/04/2010, 18h44)
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="Noselected"
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 (24/04/2010, 23h17)
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 }
scalpa (25/04/2010, 10h00)
> 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?

[..]
> 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 (25/04/2010, 10h27)
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 (25/04/2010, 12h39)
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>
Bruno Desthuilliers (26/04/2010, 09h47)
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.[..]
SAM (26/04/2010, 10h43)
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.[..]


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é)
Pierre Goiffon (26/04/2010, 11h45)
On 26/04/2010 10:43, SAM wrote:
>> Remplacer "<span style='color:red'>" par "<span class='red'>"
>> n'apporte rien du point de vue sémantique.

> J'a rhien compris ... que vient faire la sémantique là-dedans ?


Je pense que Bruno donnait la remarque habituelle : il vaut mieux nommer
ses classes css par leur "sens" : titreniveau1 par exemple, plutôt que
"rougegras1-1". Ainsi, lorsque l'on modifiera la maquette on n'aura pas
à toucher au html mais juste au contenu de/des la feuille css.

Bon après, comme toujours la pratique peut être éloignée de la théorie,
et pour de bonnes raisons.
Mais disons que cette idée est une bonne pratique qui rend bien service
au moyen et long terme.
SAM (26/04/2010, 13h39)
Le 4/26/10 11:45 AM, Pierre Goiffon a écrit :
> On 26/04/2010 10:43, SAM wrote:
> Je pense que Bruno donnait la remarque habituelle : il vaut mieux nommer
> ses classes css par leur "sens" : titreniveau1 par exemple, plutôt que
> "rougegras1-1". Ainsi, lorsque l'on modifiera la maquette on n'aura pas
> à toucher au html mais juste au contenu de/des la feuille css.


oui, ok.

> Bon après, comme toujours la pratique peut être éloignée de la théorie,
> et pour de bonnes raisons.
> Mais disons que cette idée est une bonne pratique qui rend bien service
> au moyen et long terme.


Là, en l'occurence, les class précédemment utilisées étaient
Noselected
et
selected
qui vont bien dans ce sens (ne pas me demander pourquoi la majuscule)
bien que seule celle 'selected' devrait servir utilement, mébon.

ça a dévié vers des histoires de couleurs,
alors pourquoi pas une class avec un nom de couleur ?
(on reste bien dans le même principe de nom de class "parlant")

l'élement
- sans class : bleu
- class 'green' : vert
- class 'selected' : gras + rouge
- class 'selected' + 'green' : gras + vert

sinon ce seront deSelected, selectedRouge et selectedVert
mézakoibon ?

allez, d'ac. nous utiliserons donc deSelected à la place de green
dès qu'on a résolu le fonctionnement du JS (if if or if bleu/rouge/vert)

<span class="selected deSelected">Mais sait-y c'qu'y veut ?</span>
scalpa (26/04/2010, 19h21)
Bonjour Stéphane

Merci pour ces précisions que j'étudierai à tête reposée (plus
tard...... les vacances étant terminées!).
J'améliorerai le code dans ce sens, pour l'instant cela fonctionne
quand même(exemple : [..])
bien que cela ne soit pas très catholique ou orthodoxe c'est selon, du
point de vue du code;
Mais auparavant je dois réinstaller une bécane avec ie 6 ou 7 pour
essayer de comprendre pourquoi sous ie8 les " " disparaissent.......
et en plus pas partout!!!!
cf post du haut : <span style="color: blue" class=Noselected
onclick=pick(this);>texte</span>

Merci encore
Pascal C
Discussions similaires
L'effet tunnel se produit surtout lorsqu'on regarde ailleurs

OWA et navigateur autre que IE

Paramétrage d'une GPO produit l'effet inverse

Paramétrage d'une GPO produit l'effet inverse


Fuseau horaire GMT +2. Il est actuellement 22h42. | Privacy Policy