11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Javascript - modifier string en parcourant la page

Bonjour,

Je souhaite créer une fonction javascript afin de modifier certaines chaines de caractères d'un page HTML.
Ce script doit être appelé lorsque la page est affichée.
Le but est de remplacer des # et @ en liens vers la page twitter équivalente.

Ce qu'il me manque, c'est surtout la fonction pour parcourir la page caractère par caractère (ou par blocs).
Est ce que c'est possible à réaliser en javascript? Si oui, comment?

Merci d'avance pour vos réponses.

Mick4553
Il y a une raison particulière de vouloir le faire en javascript ? De mon point de vue cela serait plus logique que la page envoyé par le serveur contiennent déjà les liens qui vont bien.

Enfin bref, pour ton idée :
Pour obtenir le code source de la page en javascript : 
document.documentElement.innerHTML  
ou
document.documentElement.outerHTML


si tu le stock dans un string cela te permettra d'avoir un string qui contiendra le code source de la page.
Ensuite tu as juste a parcourir le string à l'aide d'une boucle et test si tu trouve un # ou un @ mais ça me semble un peu nul ..

Du coup, avec des expressions régulières ça sera plus sympa :
<!DOCTYPE html>
<html>
<body>

<p id="test">Test d'une phrase avec un @arobase et un #iese.</p>

<button onclick="remplace()">Remplace les # et @</button>

<script>
function remplace() {
    var str=document.documentElement.innerHTML;
    var res = str.replace(/(#(\w+))/, "<a href='https://twitter.com/hashtag/$2?src=hash>'>$1</a>");
    var res = res.replace(/(@(\w+))/, "<a href='https://twitter.com/$2'>$1</a>");
    document.documentElement.innerHTML = res;
}
</script>

</body>
</html>


A priori ça fonctionne pour tous les # et @


EDIT :
Pour éviter de changer les adresses mails (genre toto@toto.fr) on rajoute qu'il ne doit pas y avoir de mot collé avant le @
var res = res.replace(/([^\w])(@(\w+))/, "$1<a href='https://twitter.com/$3'>$2</a>");

Modifié par mathieu1004 (02 Dec 2015 - 22:18)
Javascript c'est surtout parce que j'ai déjà un script que j’appelle sur toutes mes pages, qu'il suffit juste de compléter. Et c'est un langage que je connait vite fait et qui me semblait adapté.

Ta méthode m'a l'air parfaite pour ce que je souhaite faire.
Je testerais demain si ça marche comme je veux sur mon site et te tiendrais au courant.

Juste une question, si tu as la réponse, est-ce que ça prends du temps pour lire la page et recharger avec les modifications ?

Merci pour cette réponse Smiley thumpup
Aucune idée, j'ai fais ça a la va vite, je n'ai pas test sur une page complète. Dans l'absolu je ne suis pas franchement sur que cela soit une bonne chose de réécrire tout le code de la page coté client.

Pour moi il faudrait faire ça coté serveur, en php par exemple, soit au moment où sont stocké les pages(fait qu'une fois, mais il faut être sur qu'il n'y a pas un bug car sinon c'est plus chiant a corrigé vu que ça devient le nouveau code stocké pour la page,meilleur solution je pense), soit au moment ou elles sont générée avant l'envoie au client (mais pour le coup il faut le faire pour chaque client qui va venir sur une page, le serveur risque de pas apprécier :s, donc solution assez bof..).

A la limite, coté client en javascript, il faudrait le faire sur certaines balises susceptible de contenir un # ou @ ça me semblerait déjà nettement mieux, car pour le moment je pense que c'est un peu crade...
Après, c'est mon choix, mais moi je l'aurais fait en jquery... je trouve cela plus simple. 

$(function(){
    $('a').each(function() {
    });
});


Là je parcours tous les href de la page. et je peux faire ce que je veux, dans le innerhtml, dans le href, etc...
Bonjour,

A l'inverse, j'aurais traité l'action en PHP.

J'aurais commencé mon script par une mise en cache de la sortie puis j'aurais appliqué ma fonction sur le cache juste avant sa restitution au navigateur.

Comme on dit "" Tous les chemins mènent... au Rhum pourvue qu'on ait soif""

Bonne journée
Je viens de tester la première fonction, ça marche pas, je vais essayer de résoudre ça.
Mais c'est vrai que c'est un peu brutal comme méthode, je vais plutôt regarder que dans les <p> qui sont les seuls endroits qui m'intéressent.

JQuery je connais pas du tout. Est ce que ça apporte beaucoup ?

PHP, je préfère éviter. Pour l'instant toutes les pages sont écrites en HTML et j'ai juste un script que j’appelle pour faire quelques modifications sur mes pages.

Après mon site est une page perso, donc c'est pas très grave si c'est pas optimisé.

Merci pour vos conseils Smiley cligne
C'est bon, j'ai pu créer la fonction que je souhaitais.
Vraiment facile avec votre aide, merci ! Smiley clapclap

Je vais pouvoir l'utiliser pour faire d'autres modifs dans ma page.

Pour ceux que ça intéresse, voilà le code que j'utilise :
var p_tags = document.getElementsByTagName("p");
for(var i = 0; i < p_tags.length; i++){
    res = p_tags[i].innerHTML;
    res = res.replace(/([^\w])(@(\w+))/, "$1<a href='https://twitter.com/$3'>$2</a>");
    res = res.replace(/([^\w])(#(\w+))/, "$1<a href='https://twitter.com/hashtag/$3?f=tweets&vertical=default&src=hash'>$2</a>");
    p_tags[i].innerHTML = res;
}

Juste une petite question concernant les valeurs: $1 représente la première parenthèse de la RegExp, $2 la deuxième..., c'est bien ça ?[/i][/i]
Modifié par Mick4553 (03 Dec 2015 - 19:05)
Ouais c'est bien ça Smiley smile
La modif que je préconisais pour les @ je ne suis pas sur qu'elle était nécessaire pour les # mais dans l'absolu cela ne change sans doute pas grand chose.
Si il y a certains cas ou cela ne fonctionne pas comme tu le souhaites il faudra modifier l'expression régulière ^^
Modifié par mathieu1004 (03 Dec 2015 - 19:18)
Oui, normalement je mets toujours espace avant les #, mais on sait jamais...
Je vais m'amuser avec les RegExp maintenant Smiley cligne
Sujet clos
Aller à