11521 sujets

JavaScript, DOM et API Web HTML5

Hello

Par quel script simple puis-je remplacer dans tout le texte de la page les apostrophes droits par des apostrophes typographiques ?
Pour des raisons de facilité immédiate et d'édition ultérieure je n'ai pas envie de le faire directement dans le texte.

Merci pour votre aide.
Modifié par kerlutinoec (16 Jun 2015 - 22:08)
Je vais te dire un secret, les apostrophes typographiques c'est le mal.

Tous les lecteurs d'écran ne les supportent pas... je sais c'est dommage mais ça vaut la peine de le faire remarquer.
QuentinC a écrit :
Je vais te dire un secret, les apostrophes typographiques c'est le mal.

Tous les lecteurs d'écran ne les supportent pas... je sais c'est dommage mais ça vaut la peine de le faire remarquer.


Qu'est-ce qu'un "lecteur d'écran" ?
lamext a écrit :


Bon courage pour faire un string.replace sur l'objet DOM...


Si je remplace str par body ça va pas marcher ?

Comment placer ' sans qu'il soit perçu comme un caractère du code html ?
a écrit :
Bon, pas grave.


Si, ça peut être grave.

Si tu lis à haute voix un texte et qu'à chaque fois que tu vois une apostrophe tu dis "apostrophe", ou pire, "symbole", ça peut devenir vraiment lourdingue.
"C apostrophe est rapidement incompréhensible N apostrophe est-ce pas ?"

Ce serait mieux de prendre des polices dont le glyphe de l'apostrophe standard (ASCII #39) ont directement la forme courbée que tu souhaites, au lieu d'utiliser du Windows1252 #146 ou du aSCII #96 par exemple. Les sites qui utilisent du ASCII #96 partout m'énervent au plus haut point.

Maintenant que télécharger des polices personnalisés n'est plus un problème, ça devrait être la solution la plus logique, d'utiliser toujours ASCII #39 et une police qui va bien.

C'est différent si c'est des simples quotes comme on les appelle en anglais, et qu'il y a une apostrophe ouvrante qui va de pair avec une fermante un peu plus loin. Là il faut utiliser les apostrophes ouvrantes et fermantes unicode. Mais ce n'est pas ce que tes messages laissent supposer à priori.

a écrit :
Et donc, tu ferais comment ?


Comme je te l'ai déjà dit, un parcours récursif de l'arbre DOM pour trouver tous les noeuds texte. De là il y a une propriété data qui est, il me semble en tout cas, modifiable.
Sinon au pire si elle ne l'est pas, il faut créer des noeuds texte supplémentaires et utiliser la méthode splitText.
Il semblerait que ce soit plutôt l'ascii 146 (il t'énerve pas celui là ? Smiley cligne )

QuentinC a écrit :

Comme je te l'ai déjà dit, un parcours récursif de l'arbre DOM pour trouver tous les noeuds texte. De là il y a une propriété data qui est, il me semble en tout cas, modifiable.
Sinon au pire si elle ne l'est pas, il faut créer des noeuds texte supplémentaires et utiliser la méthode splitText.


Euh je suis quasi-débutant (c'est mon premier site) et le javascript je maîtrise très mal. Aussi, "arbre DOM " et "noeuds texte" pour moi c'est du jargon.
Si c'est faisable simplement en quelques lignes de code JS je les veux bien (si c'est du lourd je laisse tomber).
Merci d'avance.
a écrit :
Il semblerait que ce soit plutôt l'ascii 146 (il t'énerve pas celui là ?


C'est à tester. De son côté, jaws n'a pas l'air d'y voir un problème, mais reste à voir avec les autres (NVDA, VoiceOver, talkback, ...)

Juste une précision, parler de ASCII 146 c'est techniquement faux; c'est même pas un caractère valide ISO-8859-1. Le code 146 n'existe que en Windows1252 propre à windows, en unicode l'équivalent est 8217.

Pour le code, c'est une dizaine de lignes à tout casser. Exemple rapide non testé :

function replaceApos (node) {
if (node.nodeType==3) node.data = (''+node.data).replace(/'/g, String.fromCharCode(8217)));
else for (var i=0, n=node.childNodes.length; i<n; i++) replaceApos(node.childNodes[ i ]);
}
replaceApos(document.querySelector('body'));


Niveau performances je pense que ça a quand même un certain prix, on est obligé de parcourir tout le DOM et on n'a pas le choix.
Merci pour ton aide.
Malheureusement ça ne marche pas (et ça bloque l'exécution des autres JS). (peut être est-ce partie en boucle infinie ?)
a écrit :
Malheureusement ça ne marche pas (et ça bloque l'exécution des autres JS). (peut être est-ce partie en boucle infinie ?)


J'en sais rien, j'ai pas testé. C'est juste un exemple, à toi de t'en inspirer ou pas et de l'adapter à tes besoins.

Je peux toujours essayer de te pondre un vrai code qui marche si tu veux, mais ça ne sera pas gratuit.
Bonjour,

ATTENTION : personnellement je ne ferais pas cela car cette technique va aussi supprimer les liens du contenu écrit de cette manière :
href='http://LeLien/'

Ou encore (pour les images dans le contenu par exemple) :
src='' , alt=''

etc...

Sinon, quand il s'agit de remplacer des caractères à grande échelle, je trouve qu'utiliser javascript pour vérifier chaque page côté client est une mauvaise pratique au niveau des performances. Il faut jouer au niveau de la base de donnée avec une requette SQL.

S'il s'agit de WordPress :
UPDATE wp_posts SET post_content = REPLACE(post_content, "AncienItem", "NouvelItem");

Modifié par Olivier C (09 Jun 2015 - 10:36)
Olivier C a écrit :
Bonjour,

ATTENTION : personnellement je ne ferais pas cela car cette technique va aussi supprimer les liens du contenu écrit de cette manière :
href='http://LeLien/'

Ou encore (pour les images dans le contenu par exemple) :
src='' , alt=''

etc...


Ca doit être pour ça que ça semble bloquer la page (le clic sur des liens ne donne rien).
a écrit :
ATTENTION : personnellement je ne ferais pas cela car cette technique va aussi supprimer les liens du contenu écrit de cette manière :


Non, pas si tu parcours les noeuds texte du DOM comme je le propose.
C'est en jouant avec innerHTML que tu peux avoir des problèmes.

a écrit :
Sinon, quand il s'agit de remplacer des caractères à grande échelle, je trouve qu'utiliser javascript pour vérifier chaque page côté client est une mauvaise pratique au niveau des performances. Il faut jouer au niveau de la base de donnée avec une requette SQL.


ON est dans le salon javascript donc c'est une solution javascript qui est voulue, mais c'est sur le fond totalement juste. Mieux vaut le faire une fois pour toute sur le serveur et après on n'en parle plus.
Bon je vous livre la solution finalement choisie que l'on m'a proposé sur usenet :

<script>
var b = document.getElementsByTagName('BODY')[0],
d = b.innerHTML;
b.innerHTML = d.replace(/([A-Za-zÀ-ÿ])'([A-Za-zÀ-ÿ])/g,'$1’$2');
</script>
Attention au fait que Ca ne marchera pas si tu écris « jaune d'œuf » ou bien « l'&eacute;t&eacute; » avec les entités par exemple. C'est juste une remarque en passant...
QuentinC a écrit :
Attention au fait que Ca ne marchera pas si tu écris « jaune d'œuf » ou bien « l'&amp;eacute;t&amp;eacute; » avec les entités par exemple. C'est juste une remarque en passant...


Y'a eu un seul manque que j'ai corrigé à la main. Sinon j'écris les "l'é..." directement avec l'accent.