admin管理员组

文章数量:1356286

I have this code: [it is a rough example with poor coding, but it illustrates what I want to do.]

<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>

When I click on the <a> i want to change the onclick parameter within fun() from 'cake' to 'jump'. I do not want to use the setAttribute() method as my real example has several nested tags and I want to replace 'cake' in several different places.

I want the innerHTML.replace() function to work to do this but, alas it doesn't function as I want it to. How do I replace text within innerHTML?

I have this code: [it is a rough example with poor coding, but it illustrates what I want to do.]

<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>

When I click on the <a> i want to change the onclick parameter within fun() from 'cake' to 'jump'. I do not want to use the setAttribute() method as my real example has several nested tags and I want to replace 'cake' in several different places.

I want the innerHTML.replace() function to work to do this but, alas it doesn't function as I want it to. How do I replace text within innerHTML?

  • javascript
Share Improve this question edited Aug 26, 2010 at 18:55 James asked Aug 26, 2010 at 18:49 JamesJames 111 gold badge1 silver badge3 bronze badges 2
  • You said it is not functioning the way you want it to. What is it doing? – John Commented Aug 26, 2010 at 18:59
  • What should happen when one clicks on a "Mer"? – Richard JP Le Guen Commented Aug 26, 2010 at 19:06
Add a ment  | 

4 Answers 4

Reset to default 3

Forget it. Never hack around with the innerHTML, there's no guarantee it will be in any particular format, you're very likely to mess up the markup by replacing the wrong thing, and even if it works, you're serialising the document content into a string, hacking it and then recreating the entire content from the string again, instead of just replacing a particular thing you're interested in. This is slow and loses all non-serialisable data (like form field values, JS references and assigned event handlers).

In general DOM methods are much more reliable for altering page content. It's what they were designed for. Use them, and use the DOM Level 1 HTML properties in preference to setAttribute which is badly broken in IE. This goes double for event handler attributes. Trying to hack at JavaScript code inside an attribute value inside an HTML string is insanity, even if it worked.

There is no need whatsoever to replace any page content. You could implement your example much more easily with a 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>

First, you have an error in your HTML:

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

What's with the ;) outside the attribute value?

Next...

[...] method as my real example has several nested tags and I want to replace 'cake' in several different places.

This means you really, really don't want to use innerHTML and replace(). It will screw up. Use an HTML parser of sorts; walk the DOM recursively... anything other than replace.

Within the scope of your specific example, I suggest using a variable to hold the value of cake and jump instead.

Change your replace call to use the RegEx "global" flag:

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

That said, if you're using this for more than a quick test, you should use DOM objects to acplish what you would like to do. Otherwise, this will get ugly really fast.

Also, it wouldn't hurt to change your <a> tag code:

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

(The return false; is optional, but good practice.)

The easiest way to change the onclick parameter is to make it a variable instead of a string literal. Here I'm using a variable called 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>

本文标签： Javascript Replace() and innerHTMLStack Overflow

版权声明：本文标题：Javascript Replace() and innerHTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743972440a2570744.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。