web-dev-qa-db-ja.com

Javascript-innerHTMLを使用してhtmlを置き換える

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ハイパーリンクが消えます。私が間違っていること。助けてください。

すべてのご協力ありがとうございます。

javascriptinnerhtml
9
Dexter

結果を割り当てて再度置き換えるのではなく、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 [〜＃〜] を参照してください。

13
Antony

開始タグを置き換えてから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;
2
Guffa