在JavaScript中如何取消转义HTML实体？

如果你像我一样在寻找它，那么现在有一个不错且安全的JQuery方法。

https://api.jquery.com/jquery.parsehtml/

你可以在控制台中键入以下内容：

var x = "test &";
> undefined
$.parseHTML(x)[0].textContent
> "test &"

因此，$.parseHTML（x）返回一个数组，如果您的文本中有HTML标记，则数组长度将大于1。

jQuery会为您进行编码和解码，但您需要使用textarea标签，而不是div标签。

var str1 = 'One & two & three';
var str2 = "One & two & three";
  
$(document).ready(function() {
   $("#encoded").text(htmlEncode(str1)); 
   $("#decoded").text(htmlDecode(str2));
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="encoded"></div>
<div id="decoded"></div>

CMS的方法很好用，除非您想要反转义的HTML非常长，超过65536个字符。因为在Chrome中，内部HTML会被分成许多子节点，每个子节点最多只有65536个字符，并且您需要将它们连接起来。这个函数也适用于非常长的字符串：

function unencodeHtmlContent(escapedHtml) {
  var elem = document.createElement('div');
  elem.innerHTML = escapedHtml;
  var result = '';
  // Chrome splits innerHTML into many child nodes, each one at most 65536.
  // Whereas FF creates just one single huge child node.
  for (var i = 0; i < elem.childNodes.length; ++i) {
    result = result + elem.childNodes[i].nodeValue;
  }
  return result;
}

关于innerHTML最大长度的更多信息，请参见此答案：https://dev59.com/aErSa4cB1Zd3GeqPavvb#27545633

要在JavaScript中取消转义HTML实体，您可以使用小型库html-escaper：npm install html-escaper

import {unescape} from 'html-escaper';

unescape('escaped string');

*) 请注意，这些功能并不涵盖所有的HTML实体，只涵盖最常见的实体，即&、<、>、'和"。如果要取消转义所有HTML实体，您可以使用he库。

首先在页面中创建一个<span id="decodeIt" style="display:none;"></span>

接着，将待解码的字符串赋值给此标签的innerHTML属性：

document.getElementById("decodeIt").innerHTML=stringtodecode

stringtodecode=document.getElementById("decodeIt").innerText

以下是整个代码：

var stringtodecode="<B>Hello</B> world<br>";
document.getElementById("decodeIt").innerHTML=stringtodecode;
stringtodecode=document.getElementById("decodeIt").innerText

这个问题没有明确说明x的来源，但如果可能的话，我们应该防御恶意的（或来自我们自己应用程序的）意外输入。例如，假设x的值为&amp; <script>alert('hello');</script>。在jQuery中处理这种情况的一种安全而简单的方式是：

var x    = "&amp; <script>alert('hello');</script>";
var safe = $('<div />').html(x).text();

// => "& alert('hello');"

通过 https://gist.github.com/jmblog/3222899 发现此方法。鉴于该方法至少与某些替代方案一样短，并且可以提供防御XSS攻击的保护，我认为没有太多理由避免使用这个解决方案。

（我最初将其发布为评论，但由于同一线程中的后续评论要求我这样做，所以我将其添加为答案）。

对于新手来说：

const htmlDecode = innerHTML => Object.assign(document.createElement('textarea'), {innerHTML}).value;

console.log(htmlDecode('Complicated - Dimitri Vegas & Like Mike'));

虽然不是直接回答你的问题，但是如果你的RPC返回一些结构（无论是XML还是JSON等），并在该结构中包含这些图像数据（例如URL），那不是更好吗？

然后你只需在JavaScript中解析它，并使用JavaScript本身构建<img>。

从RPC收到的结构可能如下所示：

{"img" : ["myimage.jpg", "myimage2.jpg"]}

我认为这样做更好，因为将来自外部源的代码注入到您的页面中看起来并不太安全。想象一下有人劫持了您的XML-RPC脚本，并在其中放置了一些您不希望出现的内容（甚至是一些JavaScript...）

const decodeHTMLEntities = text => {
    // Create a new element or use one from cache, to save some element creation overhead
    const el = decodeHTMLEntities.__cache_data_element 
             = decodeHTMLEntities.__cache_data_element 
               || document.createElement('div');
    
    const enc = text
        // Prevent any mixup of existing pattern in text
        .replace(/⪪/g, '⪪#')
        // Encode entities in special format. This will prevent native element encoder to replace any amp characters
        .replace(/&([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+);/gi, '⪪$1⪫');

    // Encode any HTML tags in the text to prevent script injection
    el.textContent = enc;

    // Decode entities from special format, back to their original HTML entities format
    el.innerHTML = el.innerHTML
        .replace(/⪪([a-z1-8]{2,31}|#x[0-9a-f]+|#\d+)⪫/gi, '&$1;')
        .replace(/#⪫/g, '⪫');
   
    // Get the decoded HTML entities
    const dec = el.textContent;
    
    // Clear the element content, in order to preserve a bit of memory (it is just the text may be pretty big)
    el.textContent = '';

    return dec;
}

// Example
console.log(decodeHTMLEntities("<script>alert('&awconint;&CounterClockwiseContourIntegral;&#x02233;&#8755;⪪#x02233⪫');</script>"));
// Prints: <script>alert('∳∳∳∳⪪##x02233⪫');</script>

顺便说一下，我选择使用字符⪪和⪫，因为它们很少被使用，所以匹配它们对性能的影响显著降低。

window.htmlentities = {
        /**
         * Converts a string to its html characters completely.
         *
         * @param {String} str String with unescaped HTML characters
         **/
        encode : function(str) {
            var buf = [];

            for (var i=str.length-1;i>=0;i--) {
                buf.unshift(['&#', str[i].charCodeAt(), ';'].join(''));
            }

            return buf.join('');
        },
        /**
         * Converts an html characterSet into its original character.
         *
         * @param {String} str htmlSet entities
         **/
        decode : function(str) {
            return str.replace(/&#(\d+);/g, function(match, dec) {
                return String.fromCharCode(dec);
            });
        }
    };

完整来源：https://ourcodeworld.com/articles/read/188/encode-and-decode-html-entities-using-pure-javascript