Javascript Replace() and 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?

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>

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?

Share Improve this question edited Aug 26, 2010 at 18:55 asked Aug 26, 2010 at 18:49 James 111 gold badge1 silver badge3 bronze badges

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

Sorted by: 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 innerHTML - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)