簡單說一下業務場景,前台使用者通過 input 輸入內容,在離開焦點時,將內容在 div 中顯示。
這時遇到乙個問題,如果使用者輸入了 html 標籤,則在 div 顯示中,標籤被解析。
由於是純前端操作,不涉及後端,因此需要通過 js 對輸入內容進行轉義。
這裡提供乙個非常簡單有效的轉義方案,利用了 innerhtml 和 innertext
注:火狐不支援 innertext,需要使用 textcontent 屬性,而 ie 早期版本不支援此屬性,為了同時相容 ie因為 innertext(textcontent)會獲取純文字內容,忽略 html 節點標籤,而 innerhtml 會顯示標籤內容,及火狐,需要進行判斷操作.
所以我們先將需轉義的內容賦值給 innertext(textcontent),再獲取它的 innerhtml 屬性,這時獲取到的就是轉義後文字內容。
id="board">
div>
function
htmlencode
(html)
var tagtext = "123&456
"; console.log(htmlencode(tagtext)); //123&456
function
htmldecode
(text)
var tagtext = "123&456
"; var encodetext = htmlencode(tagtext);
console.log(encodetext); //123&456
console.log(htmldecode(encodetext)); //123&456
script>
body>
html>
同理,反轉義的方法為先將轉義文字賦值給 innerhtml,然後通過 innertext(textcontent)獲取轉義前的文字內容。 轉義與反轉義
span 內容會作為html 解析,其他資料沒問題,url 就不行了,url 中的 會被解釋成 amp 而上傳到伺服器,用自定義標籤即可 link style display none link document.getelementbyid link value document.geteleme...
字串 轉義 反轉義
本人用wangeditor富文字外掛程式的時候 富文字的內容裡有鏈結 以及各種標籤 想存到資料庫中 出現了 特殊字元 json轉換錯誤 得把字串轉義一下存到後台 靠的就是這幾行 解決的問題 很有用 escapehtml就是把帶有html標籤以及特殊字元給轉義一下 傳給後台 存入資料庫 unescap...
JS對HTML實體字元轉義和反轉義
一 名詞解釋 html實體字元 由於在html中有些符號是預留的,比如在html中不能直接使用尖括號 或 會被誤認為標籤符號。所以需要通過html實體字元去進行替換 html實體字元兩種形式 eg 小於號的html實體字元顯示方式 數字形式 實體名形式 注意 使用實體名而不是數字的好處是,名稱易於記...