網站搜尋

javascript - HTML 實體解碼

我如何使用 JavaScript 或 JQuery 編碼和解碼 HTML 實體？

var varTitle = "Chris' corner";

我希望它是：

var varTitle = "Chris' corner";

答案＃1

我不建議使用被接受為答案的 jQuery 代碼。雖然它不會將要解碼的字串插入到頁面中，但它確實會導致例如腳本和 HTML 元素被創建。這比我們需要的代碼多得多。相反，我建議使用更安全、更優化的函數。

var decodeEntities = (function() {
  // this prevents any overhead from creating the object each time
  var element = document.createElement('div');

  function decodeHTMLEntities (str) {
    if(str && typeof str === 'string') {
      // strip script/html tags
      str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
      str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = '';
    }

    return str;
  }

  return decodeHTMLEntities;
})();

http://jsfiddle.net/LYteC/4/

要使用此功能，只需調用 decodeEntities("&amp;")，它將使用與 jQuery 版本相同的底層技術——但沒有 jQuery 的開銷，並且會在輸入中清理 HTML 標籤。請參見 Mike Samuel 在被接受的答案中的評論，了解如何過濾 HTML 標籤。

這個功能可以很容易地作為 jQuery 插件使用，只需在你的專案中加入以下這行程式碼。

jQuery.decodeEntities = decodeEntities;

答案＃2

你可以試試像這樣的東西：

var Title = $('<textarea />').html("Chris&apos; corner").text();
console.log(Title);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS Fiddle。

一個更互動的版本：

$('form').submit(function() {
  var theString = $('#string').val();
  var varTitle = $('<textarea />').html(theString).text();
  $('#output').text(varTitle);
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
  <fieldset>
    <label for="string">Enter a html-encoded string to decode</label>
    <input type="text" name="string" id="string" />
  </fieldset>
  <fieldset>
    <input type="submit" value="decode" />
  </fieldset>
</form>

<div id="output"></div>

JS Fiddle。

答案＃3

編輯 2023：如今你應該使用像 he 這樣的函式庫。 :

就像 Robert K 說的，不要使用 jQuery.html().text() 來解碼 HTML 實體，因為這不安全，使用者輸入不應該有權限訪問 DOM。閱讀關於 XSS 的資料可以了解為什麼這樣不安全。

取而代之的是，嘗試使用附帶 escape 和 unescape 方法的 Underscore.js 工具庫：

_.escape(字串)

將字串轉義以便插入到 HTML 中，替換 &、<、>、"、` 和 ' 字元。

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

_.unescape(string)

與轉義相反，將 &amp;、&lt;、&gt;、&quot;、&#96; 和 &#x27; 替換為它們未轉義的對應字符。

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

要支援解碼更多字元，只需複製 Underscore 的 unescape 方法，並在映射中添加更多字元。

答案＃4

原作者在此回答。

這是我最喜歡的解碼 HTML 字元的方式。使用這段程式碼的優點是標籤也會被保留。

function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

範例: http://jsfiddle.net/k65s3/

輸入：

Entity:&nbsp;Bad attempt at XSS:<script>alert('new\nline?')</script><br>

輸出：

Entity: Bad attempt at XSS:<script>alert('new\nline?')</script><br>

答案＃5

這裡有一個不需要建立 div 的快速方法，並且可以解碼「最常見」的 HTML 轉義字符：

function decodeHTMLEntities(text) {
    var entities = [
        ['amp', '&'],
        ['apos', '\''],
        ['#x27', '\''],
        ['#x2F', '/'],
        ['#39', '\''],
        ['#47', '/'],
        ['lt', '<'],
        ['gt', '>'],
        ['nbsp', ' '],
        ['quot', '"']
    ];

    for (var i = 0, max = entities.length; i < max; ++i)
        text = text.replace(new RegExp('&' + entities[i][0] + ';', 'g'), entities[i][1]);

    return text;
}

console.log(decodeHTMLEntities('&amp; &quot;'));

答案＃6

這裡是另一個版本：

function convertHTMLEntity(text){
    const span = document.createElement('span');

    return text
    .replace(/&[#A-Za-z0-9]+;/gi, (entity,position,text)=> {
        span.innerHTML = entity;
        return span.innerText;
    });
}

console.log(convertHTMLEntity('Large &lt; &#163; 500'));

答案＃7

受到羅伯特·K解決方案的啟發，這個版本不會去除HTML標籤，並且同樣安全。

var decode_entities = (function() {
    // Remove HTML Entities
    var element = document.createElement('div');

    function decode_HTML_entities (str) {

        if(str && typeof str === 'string') {

            // Escape HTML before decoding for HTML Entities
            str = escape(str).replace(/%26/g,'&').replace(/%23/g,'#').replace(/%3B/g,';');

            element.innerHTML = str;
            if(element.innerText){
                str = element.innerText;
                element.innerText = '';
            }else{
                // Firefox support
                str = element.textContent;
                element.textContent = '';
            }
        }
        return unescape(str);
    }
    return decode_HTML_entities;
})();

答案＃8

jQuery 提供了一種編碼和解碼 HTML 實體的方法。

如果你使用 “

” 標籤，它會刪除所有的 HTML。

function htmlDecode(value) {
    return $("<div/>").html(value).text();
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
}

如果你使用「