Javascript - 使用 innerHTML 替换 html
Posted
技术标签:
【中文标题】Javascript - 使用 innerHTML 替换 html【英文标题】：Javascript - Replace html using innerHTML 【发布时间】：2013-03-15 03:36:45 【问题描述】：我正在尝试使用 innerhtml javascript 替换 html。
发件人：
aaaaaa/cat/bbbbbb
收件人：
<a href="http://www.google.com/cat/world">Helloworld</a>
这是我的代码
<html>
<head>
</head>
<body>
<p id="element1">aaaaaa/cat/bbbbbb</p>
<script language="javascript">
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /aaaaaa./g,'<a href=\"http://www.google.com/') ;
strMessage1.innerHTML = strMessage1.innerHTML.replace( /.bbbbbb/g,'/world\">Helloworld</a>') ;
</script>
</body>
</html>
当我运行此代码时，它会消失 Helloworld 超链接。 我做错了什么。请帮忙。
感谢您的所有帮助。
【问题讨论】：
【参考方案1】：您应该将 replace() 链接在一起，而不是分配结果并再次替换。
var strMessage1 = document.getElementById("element1") ;
strMessage1.innerHTML = strMessage1.innerHTML
.replace(/aaaaaa./g,'<a href=\"http://www.google.com/')
.replace(/.bbbbbb/g,'/world\">Helloworld</a>');
见DEMO。
【讨论】：
我这样做了，但它破坏了页面的其余部分，从它插入的任何地方开始。 @M21 HTML 字符串替换更像是一个有趣的练习，而不是一个可靠的解决方案。如果您有稍微不同的问题，请提出您自己的问题。举例说明为什么它在您的问题中不起作用，向我们展示您的尝试，如果您愿意，也可以链接到此问题。【参考方案2】：您正在替换起始标记，然后将其放回innerHTML，因此代码将无效。在将代码放回元素之前进行所有替换：
var html = strMessage1.innerHTML;
html = html.replace( /aaaaaa./g,'<a href=\"http://www.google.com/');
html = html.replace( /.bbbbbb/g,'/world\">Helloworld</a>');
strMessage1.innerHTML = html;
【讨论】：
这对我也有效，但会破坏页面的其余部分。以上是关于Javascript - 使用 innerHTML 替换 html的主要内容，如果未能解决你的问题，请参考以下文章