web-dev-qa-db-ja.com

JavaScript onClickイベントハンドラーでの二重引用符のエスケープ

以下の簡単なコードブロックは、静的なHTMLページで提供できますが、JavaScriptエラーが発生します。 onClickハンドラーに埋め込まれた二重引用符（つまり、「xyz」）をエスケープするにはどうすればよいですか？HTMLは、データベースからデータを取得することで動的に生成されます。ダブルクォート文字の前に単一のバックスラッシュを追加してもうまくいかないようです。

<script type="text/javascript">
    function parse(a, b, c) {
        alert(c);
    }
</script>

<a href="#x" onclick="parse('#', false, '<a href=\"xyz'); return false">Test</a>
javascripthtmljavascript-eventsescaping
59
user133046

試しましたか

&quot;または\x22

の代わりに

\"

？

83
Landon Kuhn

Javascriptエスケープではなく、HTMLエスケープする必要があります。変化する \"から&quot;

53
Aseem Kishore

控えめな方法で（jqueryやdojoなどのlibを介して）これを行うことについてはCMSに同意しますが、ここでも機能します。

<script type="text/javascript">
function parse(a, b, c) {
    alert(c);
  }

</script>

<a href="#x" onclick="parse('#', false, 'xyc&quot;foo');return false;">Test</a>

それがbarfsする理由はJavaScriptのせいではなく、HTMLパーサーのせいです。エスケープされた引用符の概念はありませんが、終了引用符を探して移動し、それを見つけてonclick関数として返します。ただし、これは無効なjavascriptであるため、JavaScriptが関数を実行しようとするまでエラーについては見つかりません。

6
seth

また、2つのバックスラッシュ(\\")エスケープ文字をエスケープします。

5
Mark A. Nicolosi

最適なアプローチは、onclickハンドラーを割り当てることだと思います nobtrusively 。

このようなもの：

window.onload = function(){
    var myLink = document.getElementsById('myLinkId');
    myLink.onclick = function(){ 
        parse('#', false, '<a href="xyz');
        return false;
    }
}

//...


<a href="#" id="myLink">Test</a>
1
CMS