Javascript Remplacer() et innerHTML

J'ai ce code: [il est un exemple grossier avec mauvais codage, mais il illustre ce que je veux faire.]Javascript Remplacer() et innerHTML

<html> 
<body> 

<script type="text/javascript"> 

    function fun() 
    { 
     var divs = document.getElementById('hi'); 
     divs.innerHTML = divs.innerHTML.replace("cake","jump"); 
     alert(divs.innerHTML); 
    } 

    </script> 

    <div id="hi"> 
     <span onclick="fun('cake');">Mer<span onclick="fun('cake');">Mer</span></span> 
    </div> 
    <a onclick='fun()';)>Click</a> 
</body> 
</html>

Lorsque je clique sur le <a> je veux changez le paramètre onclick dans fun() de 'cake' à 'jump'. Je ne veux pas utiliser la méthode setAttribute() car mon exemple réel a plusieurs balises imbriquées et je veux remplacer 'cake' dans plusieurs endroits différents.

Je souhaite que la fonction innerHTML.replace() fonctionne, mais, hélas, elle ne fonctionne pas comme je le souhaite. Comment remplacer du texte dans innerHTML?

Source

2010-08-26 James

Vous avez dit que cela ne fonctionnait pas comme vous le souhaitez. Qu'est-ce que ça fait? – John

Que devrait-il se passer quand on clique sur une "Mer"? –

Changer votre replace appel à utiliser le drapeau RegEx "global":

divs.innerHTML = divs.innerHTML.replace(/cake/g,"jump");

Cela dit, si vous utilisez cela pour plus d'un test rapide, vous devez utiliser des objets DOM pour accomplir ce que vous voulez faire . Sinon, cela deviendra vraiment laid.

En outre, il ne serait pas mal de changer votre code tag <a>:

<a onclick='fun(); return false;')>Click</a>

(Le return false; est facultative, mais les bonnes pratiques.)

Source

2010-08-26 18:51:55 palswim

Voir Modifier. J'ai oublié d'ajouter le deuxième imbriqué. – James

C'est tout, MERCI! – James

Tout d'abord, vous avez une erreur dans votre code HTML:

<a onclick='fun()';)>Click</a>

Ce qui est avec le ;)en dehors de la valeur de l'attribut?

Suivant ...

méthode [...] comme mon exemple réel a plusieurs balises imbriquées et je veux remplacer « gâteau » dans plusieurs endroits différents.

Cela signifie que vous vraiment, vraiment ne voulez pas utiliser innerHTML et replace(). Il va bousiller. Utilisez un analyseur HTML de toutes sortes; marcher le DOM récursivement ... autre chose que replace.

Dans le cadre de votre exemple spécifique, je suggère d'utiliser une variable pour contenir la valeur cake et jump à la place.

Source

2010-08-26 19:04:46

"Qu'est-ce qui se passe avec le;) en dehors de la valeur de l'attribut?" c'est évidemment un visage de winky. –

Oubliez ça. Jamais pirater avec le innerHTML, il n'y a aucune garantie que ce soit dans un format particulier, vous risquez de gâcher le balisage en remplaçant la mauvaise chose, et même si cela fonctionne, vous sérialiser le contenu du document dans une chaîne Il est lent et perd toutes les données non sérialisables (comme les valeurs de champs de formulaire, les références JS et les gestionnaires d'événements assignés). .

En général, les méthodes DOM sont beaucoup plus fiables pour modifier le contenu de la page. C'est ce pour quoi ils ont été conçus. Utilisez-les et utilisez les propriétés HTML DOM niveau 1 de préférence à setAttribute qui est fortement endommagé dans IE. Cela va double pour les attributs du gestionnaire d'événements.Essayer de pirater le code JavaScript à l'intérieur une valeur d'attribut à l'intérieur une chaîne HTML est la folie, même si cela a fonctionné.

Il n'est absolument pas nécessaire de remplacer un contenu de page. Vous pouvez mettre en œuvre votre exemple beaucoup plus facilement avec une simple variable:

<div id="hi"> 
    <span>Mer<span>Mer</span></span> 
</div> 
<a id="foo">Click</a> 

<script type="text/javascript"> 
    var potato= 'cake'; 

    document.getElementById('foo').onclick= function() { 
     potato= 'jump'; 
     return false; 
    }; 

    var spans= document.getElementById('hi').getElementsByTagName('span'); 
    for (var i= spans.length; i-->0;) { 

     spans[i].onclick= function() { 
      alert(potato); // do whatever with the variable 
     }; 
    } 
</script>

Source

2010-08-26 19:31:20 bobince

La meilleure façon de changer le paramètre onclick est de faire une variable au lieu d'une chaîne littérale. Ici, j'utilise une variable appelée food:

<script type="text/javascript"> 

var food = "cake"; 

function change() 
{ 
    food = "jump"; 
} 

</script> 

<div id="hi"> 
    <span onclick="alert(food);">Mer<span onclick="alert(food);">Mer</span></span> 
</div> 
<a onclick='change()'>Click</a>

Source

2010-08-26 23:11:49 Douglas

Javascript Remplacer() et innerHTML

Répondre

Questions connexes