Accueil > Forum > > > > Fonction replace sur mots-cles dans le code HTML ?
 Fonction replace sur mots-cles dans le code HTML ?
mardi 27 mars 2007 à 16:45:16 |
Fonction replace sur mots-cles dans le code HTML ?
Lomendil
|
Bonjour, Je suis actuellement en train de construire un code afin de pouvoir traiter le code HTML d'une page et, eventuellement, de remplacer certaines occurences par d'autres. Par exemple, transformer "Hello World" par "<SPAN style="color:#00FF00;font-weight:bold;">Hello World</SPAN>" dans toute une page, ou seulement la première occurence de l'expression si possible. Pour l'instant, je parviens à faire un "highlight" sur le mot désiré (merci window.find) mais ça ne va pas plus loin. Ma plus grande difficulté semble être de passer le HTML dans une variable pour être testée et traitée par javascript, puis retournée au navigateur. Pour information, la liste des mots-clés à remplacer est dans un tableau (Array) et pour l'instant mon code parcourt chaque élément du tableau pour le trouver dans le texte. J'ai peur que ça devienne rapidement très lourd à gérer si le code est appliqué à toutes les pages d'un site ... Je vous remercie de votre attention et attends avec impatience vos idées et réactions sur ce thème ! :-) |
|
mercredi 28 mars 2007 à 09:19:08 |
Re : Fonction replace sur mots-cles dans le code HTML ?
bultez
|
Réponse acceptée !
Bonjour,
je pense qu'ici tu aurais un exemple...
|
|
mercredi 28 mars 2007 à 10:29:12 |
Re : Fonction replace sur mots-cles dans le code HTML ?
Lomendil
|
Réponse acceptée !
Source intéressante, mais pas pour le problème que j'ai actuellement. En effet, le travail se fait sur un textarea, fait pour être modifié donc, alors que je cherche à modifier le code HTML à la volée avant de le renvoyer au navigateur.
Je me demande finalement si JavaScript est un bon choix ? C'est peut-être plutot côté serveur que je vais devoir faire ça (PHP).
|
|
mercredi 28 mars 2007 à 11:13:02 |
Re : Fonction replace sur mots-cles dans le code HTML ?
bultez
|
Réponse acceptée !
on peut utiliser le body.innerHTML et, bien sûr, adapter le script donné en exemple
|
|
mercredi 28 mars 2007 à 11:16:46 |
Re : Fonction replace sur mots-cles dans le code HTML ?
Lomendil
|
Réponse acceptée !
C'est justement ce que je cherchais !
Je venais d'ailleurs tout juste de le trouver dans une autre source, ici : http://www.javascriptfr.com/code.aspx?ID=39413
Je pense que j'ai tout ce qu'il me faut maintenant, merci !
|
|
vendredi 13 avril 2007 à 19:01:27 |
Re : Fonction replace sur mots-cles dans le code HTML ?
bmerklen
|
Réponse acceptée !
Bonjour,
As tu réussi à compiler le code que tu cherchais ?
Car cela m'interresse aussi !
Merci
|
|
samedi 14 avril 2007 à 17:51:32 |
Re : Fonction replace sur mots-cles dans le code HTML ?
Lomendil
|
Heu compiler ? o_O
Enfin j'ai effectivement réussi à faire ce que je voulais. Voici le bout de code :
[code]
function AttacherInfosBulles(cible) {
if (!cible){cible = document.body;}
//LISTE DES MOTS SUR LESQUELS LA BULLE SE PLACE AUTOMATIQUEMENT
var MotsCles = Array("Mot1","Mot2","Mot3"), reg;
//AUTRES VARIABLES
var n = 0;
var txt, i, found;
//On boucle sur chaque mot clé du tableau
for(i=0;i<MotsCles.length;i++) {
txt = cible.innerHTML; //Récupération du contenu de l'élément
reg = new RegExp(MotsCles[i],"")
MotCle=MotsCles[i].replace(/ /g,"_");
MotCle=noaccent(MotCle);
txt = txt.replace(reg,"<span class=aide onMouseOver=\"overdiv++;popLayer('"+MotCle+"')\" onMouseOut=\"hideLayer();overdiv--\">"
+MotsCles[i]+"</span>")
n++;
cible.innerHTML = txt;
}
}
[/code]
Il faut ensuite mettre onload="AttacherInfosBulles(document.getElementById('id'))"
dans le <body>
Sachant bien sûr qu'il y a le reste du code qui suit pour faire fonctionner tout ça. Si j'ai le temps que publierais la source.
|
|
samedi 14 avril 2007 à 18:47:11 |
Re : Fonction replace sur mots-cles dans le code HTML ?
bmerklen
|
Réponse acceptée !
Merci bien !
Si je ne me trompe pas, ta variable n ne sert à rien..
De plus, ton script ne fais qu'un seul remplacement..
C'est pour quoi j'ai encadré ta fonction "txt = txt.replace.." par une boucle for de 20 tours..
|
|
dimanche 15 avril 2007 à 02:07:43 |
Re : Fonction replace sur mots-cles dans le code HTML ?
Lomendil
|
Oui en effet, ma variable n venait d'une version précédente du script, on peut donc l'enlever.
Par contre je ne vois pas bien ce que tu veux faire avec tes 20 tours ? Pourquoi 20 d'ailleurs ?
Ce script n'est pas idéal, il faudrait éviter qu'il boucle sur chaque mot clé pour être plus efficace, mais je n'ai pas trouvé comment faire autrement.
|
|
dimanche 15 avril 2007 à 02:19:37 |
Re : Fonction replace sur mots-cles dans le code HTML ?
bmerklen
|
Le nombre 20 est aléatoire.. c'est juste pour tenir compte du fait qu'il peut y avoir plusieurs "Mot1" dans ta page..
Je n'ai pas non plus trouvé comment faire autrement..
De plus, il faut jouer avec les astuces pour que cela ne remplace pas le même mot en boucle..
|
|
Cette discussion est classée dans : fonction, code, replace, mots, html
 Répondre à ce message
 Sujets en rapport avec ce message
fonction replace() et code ISO [ par lddsoft ]
Bonjour,Cela va faire un bon bout de temps que je galère et que je cherche sur le web, mais je ne trouve pas de réponse à mon problème. Il peut paraît
HTML + compatibilité IE/ firefox [ par NicoIRIS ]
Bonjour,Le code ci-dessous fonctionne parfaitement sous IE mais pas sous firefox. En effet, seul le paramètre 'color' n'est pas pris en compte. Legend
pasteHTML [ par tomsawyer1664 ]
Bonjour, J'ai un WYSIWYG editor et je l'ai customisé en ajoutant une fonction permettant d'ajouter des vidéos (.flv).Mon pb est le suivant lors de l'a
utiliser editeur html de extJS dans un formulaire [ par xlight ]
salut a tous,Alors voila, je cherche à inclure dans un champ de mon formulaire l'editeur html que fourni extjs.Cependant, même en ayant épluché l'API
Comment passer une variable d'une fonction javascript dans un code jsp dans la même fonction [ par ammouna24 ]
Bonjour, Voici le bout de code que je veux faire, je sais que c'est débil de faire comme ça mais en fait ce que je veux c'est que je passe la variable
Code HTML d'une sélection [ par jdmcreator ]
Bonjour, Après plusieurs heures de recherches infructueuses sur Google, je pose ici ma question. J'aimerais savoir si on peut récupérer le code HTML
Detecter resolution d'ecran et charger un .css en fonction [ par 0zar4 ]
Yop !Alors voila j'ai une question, je suis actuelement entrain de développer mon site, j'ai de solides connaissances en HTML/CSS, j'attaque un peu de
Connaitre la fin d'une fonction [ par Angelblade ]
Bonjour à tous, je vais essayer de vous expliquer mon souci ^^'.Je veux pouvoir répéter une portion de code tous les X ms et une fois que le code a ét
Pseudo éditeur WYSIWYG qui a de la peine avec les retours à la ligne [ par WebManiaK ]
Bonjour.Je cherche à développer un éditeur WYSIWYG (What You See Is What You Get) pour que les membres puissent voir l'effet que produit leur texte en
AJAX, textarea et envoie de code html [ par Jolafreem ]
Bonjour,je développe une interface d'administration en AJAX.Voici le problème auquel je suis confronté :J'ai un textarea qui contient du code HTML et
 Livres en rapport
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|