Question

我有这个代码：[这是一个粗略的例子，编码很差，但它说明了我想做的事。）

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

当我点击<a>时，我想将fun（）中的onclick参数从'cake'更改为'jump'。我不想使用setAttribute（）方法，因为我的实例有几个嵌套标签，我想在几个不同的地方替换'cake'。

我希望innerHTML.replace（）函数能够执行此操作，但是，它不能按我的意愿运行。如何替换innerHTML中的文本？

Answer 1

算了。永远不要讨论innerHTML，不能保证它会采用任何特定的格式，你很可能通过更换错误的东西搞乱标记，即使它有效，你也会将文档序列化将内容转换为字符串，将其破解，然后再次从字符串中重新创建整个内容，而不是仅仅替换您感兴趣的特定内容。这很慢并且丢失所有不可序列化的数据（如表单字段值，JS引用和指派事件处理程序）。

通常，DOM方法对于更改页面内容更加可靠。这就是他们的设计目标。使用它们，并使用优先于setAttribute的DOM Level 1 HTML属性，这在IE中严重破坏。对于事件处理程序属性，这是两倍。试图破解里面的内部内部的 HTML字符串是疯狂的，即使它有效。

无需替换任何页面内容。您可以使用一个简单的变量更轻松地实现您的示例：

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

Answer 2

首先，您的HTML中有错误：

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

属性值之外的;) 有什么用？

下一步......

[...]方法，因为我的实例有几个嵌套标签，我想在几个不同的地方替换'cake'。

这意味着你真的真的不想使用innerHTML和replace()。将搞砸了。使用各种HTML解析器;递归地遍历DOM ...... replace以外的任何东西。

在您的具体示例范围内，我建议您使用变量来保留cake和jump的值。

Answer 3

更改replace来电以使用RegEx "global"标志：

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

也就是说，如果你使用它不仅仅是一个快速测试，你应该使用DOM对象来完成你想做的事情。否则，这会很快变得难看。

此外，更改<a>代码代码：

也不会有什么坏处

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

（return false;是可选的，但是很好的做法。）

Answer 4

更改onclick参数的最简单方法是使其成为变量而不是字符串文字。在这里，我使用了一个名为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（）和innerHTML

4 个答案: