HTML-JS中的單雙引混合處理原則

Web 開發時常會遇到 鏈接中調用JS操作,如:

<a href="#" onclick="showName('donhwa')">查看名字</a>

這裏的名字  donhwa ,偶爾會帶有 單引,或雙引,或兼有之。 這時,又要如何調整纔不會暴腳本感嘆號呢? 也許你我都經常遇到,偶爾調整一陣可以了就這樣過了,沒有總結下來。

下面是整理了一下的結果,記錄一下。

 

http://files.cnblogs.com/donhwa/testQuote.rar

 

<html>
<head>
    <title>HTML-JS中的單雙引混合處理-[by www.cnblogs.com/donhwa]</title>
    <style type="text/css">
        body
        {
            font:normal 14px/20px 微軟雅黑;
            color:#506;
            line-height: 200%;
        }
        dd{padding:4px 8px;}
        p{padding:0 10px;}
        a{display:block;}
        em{color:Red;display:block;}
    </style>
</head>
<body>
    <dl>
        <dt>HTML-JS中的單雙引混合處理-[by www.cnblogs.com/donhwa]</dt>
        <dd>
            <strong>情形一:無符號內容</strong>
            <p>
                <a href="#" onclick="alert('0')">Html雙引,JS單引</a>
                <a href="#" onclick='alert("0")'>Html單引,JS雙引</a>
            </p>
        </dd>
        <dd>
            <strong>情形二:含單引及雙引內容</strong><br />
            <p>
            <a href="#" onclick="alert('  \' " ')">Html雙引,JS單引包裝</a>
            <em>單引轉義,雙引編碼</em>
            <a href="#" onclick='alert("  '\"   ")'>Html單引,JS雙引包裝</a>
            <em>雙引轉義,單引編碼</em>
            </p>
        </dd>
        <dd>
            <strong>情形三:Html 無引</strong><br />
            <a href="#" onclick=alert('abcdef')>Html無引,內容無空格</a><em>儘量不要用無引方式</em>
            <a href="#" onclick=alert('ab cdef')>Html無引,內容中間空格</a><em>引發JS錯誤</em>
            <a href="#" onclick=alert(' abcdef ')>Html無引,內容左右空格</a><em>引發HTML錯誤</em>
        </dd>
        <dd>
        <h3>結論</h3>
        以JS的字符包裝符號區分,用啥包裝轉義啥,另一個編碼;
        </dd>
    </dl>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章