我可以在javascript中转义html特殊字符吗？

我想通过javascript函数将文本显示为HTML。如何在JS中转义html特殊字符？是否有API？

这不是重复的，因为此问题不会询问jQuery。我只对此感兴趣，因为我不使用jQuery ...

Javascript中的HtmlSpecialChars等效副本是否可能？

#1 楼

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

Why "'" and not "'" ?

– sereda
Nov 9 '11 at 13:32

因为：stackoverflow.com/questions/2083754/…

– Shreyans
13年3月27日在21:33

我认为replace（）调用中的正则表达式是不必要的。普通的旧单字符字符串也可以。

– jamix
2014年5月30日14:47

@jamix您不能用原始字符串进行全局替换，而现代的浏览器引擎可以很好地优化简单的正则表达式。

–比约恩
2014年5月30日15:43

是否有任何标准的API或这是唯一的方法？

– Sunil Garg
1月6日7:02

#2 楼

 function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

 <input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

在这里工作，但无法在浏览器中离线为我工作

–user8850199
18年7月15日在12:30

#3 楼

您可以使用jQuery的.text()函数。例如，

http://jsfiddle.net/9H6Ch/

来自jQuery文档，有关.text()函数：

我们需要意识到，此方法
转义了必要时提供的字符串，以使其能够正确呈现HTML中的
。为此，它调用
DOM方法.createTextNode（），
不会将字符串解释为HTML。

jQuery文档的早期版本用它表示这种方式（添加了重点）：

我们需要注意，该方法会根据需要转义所提供的字符串，以便可以正确地以HTML呈现。为此，它调用DOM方法.createTextNode（），该方法将特殊字符替换为它们的HTML实体等效项（例如＆amplt; for <）。

You can even use it on a fresh element if you just want to convert like this: const str = "foo<>'\"&"; $('

').text(str).html() yields foo<>'"&

– amoebe
Nov 14 '17 at 21:46

#4 楼

使用lodash

_.escape('fred, barney, & pebbles');
// => 'fred, barney, &amp; pebbles'

源代码

这是什么相反？与之相反的函数名称？

– Sunil Garg
1月6日7:04

下划线具有相同的功能：underscorejs.org/#escape＆underscorejs.org/#unescape

– juanmirocks
5月21日10:38

#5 楼

我想我找到了正确的方法...

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

今天，我学到了一些有关HTML的新知识。 w3schools.com/jsref/met_document_createtextnode.asp。

– Sellorio
18年6月27日在22:39

请注意，如果尝试像这样访问文本节点，则不会转义其内容：document.createTextNode（“

编程黑洞网