有谁知道如何将Javascript中的特殊字符转换为HTML？
例子：
&（和号）变为&amp。ENT_NOQUOTES 未设置时，"（双引号）变为 &quot。ENT_QUOTES 时，'（单引号）才会变为 &#039。<（小于）变为&lt。>（大于）变为&gt。【问题讨论】：
标签： javascript
你需要一个函数来做类似的事情
return mystring.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, """);
但考虑到您对单引号/双引号的不同处理方式的需求。
【讨论】：
/g 在正则表达式中表示“全局”。简单地说，所有出现的字符串都将被替换。如果没有/g，只会替换第一个匹配项。
创建一个使用字符串replace的函数
function convert(str)
{
str = str.replace(/&/g, "&");
str = str.replace(/>/g, ">");
str = str.replace(/</g, "<");
str = str.replace(/"/g, """);
str = str.replace(/'/g, "'");
return str;
}
【讨论】：
<html>
<body>
<script type="text/javascript">
var str= "&\"'<>";
alert('B4 Change:\n' + str);
str= str.replace(/\&/g,'&');
str= str.replace(/</g,'<');
str= str.replace(/>/g,'>');
str= str.replace(/\"/g,'"');
str= str.replace(/\'/g,''');
alert('After change:\n' + str);
</script>
</body>
</html>
用这个来测试：http://www.w3schools.com/js/tryit.asp?filename=tryjs_text
【讨论】：
在我看来，最好的方法是使用浏览器内置的 HTML 转义功能来处理许多情况。为此，只需在 DOM 树中创建一个元素并将该元素的 innerText 设置为您的字符串。然后检索元素的innerHTML。浏览器将返回一个 HTML 编码的字符串。
function HtmlEncode(s)
{
var el = document.createElement("div");
el.innerText = el.textContent = s;
s = el.innerHTML;
return s;
}
试运行：
alert(HtmlEncode('&;\'><"'));
输出：
&;'><"
Prototype JS library 也使用了这种转义 HTML 的方法，尽管与我给出的简单示例不同。
注意：您仍然需要自己转义引号（双引号和单引号）。您可以使用其他人在此处列出的任何方法。
【讨论】：
delete el 在这里是一个错误。 perfectionkills.com/understanding-delete
<>& 上确实可以正常工作，但不如 Neotropic 或 KooiInc 的解决方案那么全面。
output = $('<div>').text(input).html()
此通用函数将每个非字母字符编码为其 htmlcode（数字）：
function HTMLEncode(str) {
var i = str.length,
aRet = [];
while (i--) {
var iC = str[i].charCodeAt();
if (iC < 65 || iC > 127 || (iC>90 && iC<97)) {
aRet[i] = '&#'+iC+';';
} else {
aRet[i] = str[i];
}
}
return aRet.join('');
}
【讨论】：
<>&
var iC = str.charCodeAt(i)
function escape (text)
{
return text.replace(/[<>\&\"\']/g, function(c) {
return '&#' + c.charCodeAt(0) + ';';
});
}
alert(escape("<>&'\""));
【讨论】：
结果：
<-"-&-"->-<-'-#-'->在 testarea 标签中：
-如果您只是在长代码中更改一些字符...
【讨论】：
是的，但是如果您需要将结果字符串插入某处而不将其转换回，您需要这样做：
str.replace(/'/g,"&amp;#39;"); // and so on
【讨论】：
function char_convert() {
var chars = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];
var codes = ["©","Û","®","ž","Ü","Ÿ","Ý","$","Þ","%","¡","ß","¢","à","£","á","À","¤","â","Á","¥","ã","Â","¦","ä","Ã","§","å","Ä","¨","æ","Å","©","ç","Æ","ª","è","Ç","«","é","È","¬","ê","É","­","ë","Ê","®","ì","Ë","¯","í","Ì","°","î","Í","±","ï","Î","²","ð","Ï","³","ñ","Ð","´","ò","Ñ","µ","ó","Õ","¶","ô","Ö","·","õ","Ø","¸","ö","Ù","¹","÷","Ú","º","ø","Û","»","ù","Ü","@","¼","ú","Ý","½","û","Þ","€","¾","ü","ß","¿","ý","à","‚","À","þ","á","ƒ","Á","ÿ","å","„","Â","æ","…","Ã","ç","†","Ä","è","‡","Å","é","ˆ","Æ","ê","‰","Ç","ë","Š","È","ì","‹","É","í","Œ","Ê","î","Ë","ï","Ž","Ì","ð","Í","ñ","Î","ò","‘","Ï","ó","’","Ð","ô","“","Ñ","õ","”","Ò","ö","•","Ó","ø","–","Ô","ù","—","Õ","ú","˜","Ö","û","™","×","ý","š","Ø","þ","›","Ù","ÿ","œ","Ú"];
for(x=0; x<chars.length; x++){
for (i=0; i<arguments.length; i++){
arguments[i].value = arguments[i].value.replace(chars[x], codes[x]);
}
}
}
char_convert(this);
【讨论】：
var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 169, 61558, 8226, 61607);
var swapStrings = new Array("--", "--", "'", "'", '"', '"', "*", "...", "™", "©", "•", "•", "•");
var TextCheck = {
doCWBind:function(div){
$(div).bind({
bind:function(){
TextCheck.cleanWord(div);
},
focus:function(){
TextCheck.cleanWord(div);
},
paste:function(){
TextCheck.cleanWord(div);
}
});
},
cleanWord:function(div){
var output = $(div).val();
for (i = 0; i < swapCodes.length; i++) {
var swapper = new RegExp("\\u" + swapCodes[i].toString(16), "g");
output = output.replace(swapper, swapStrings[i]);
}
$(div).val(output);
}
}
我们现在使用的另一个有效的方法。上面的一个我让它调用一个脚本并返回转换后的代码。仅适用于小型文本区域（意味着文章/博客等不完整...）
以上。适用于大多数字符。
var swapCodes = new Array(8211, 8212, 8216, 8217, 8220, 8221, 8226, 8230, 8482, 61558, 8226, 61607,161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183, 184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227, 228, 229, 230, 231, 232, 233, 234, 235, 236, 237, 238, 239, 240, 241, 242, 243, 244, 245, 246, 247, 248, 249, 250, 251, 252, 253, 254, 255, 338, 339, 352, 353, 376, 402);
var swapStrings = new Array("--", "--", "'", "'", '"', '"', "*", "...", "™", "•", "•", "•", "¡", "¢", "£", "¤", "¥", "¦", "§", "¨", "©", "ª", "«", "¬", "­", "®", "¯", "°", "±", "²", "³", "´", "µ", "¶", "·", "¸", "¹", "º", "»", "¼", "½", "¾", "¿", "À", "Á", "Â", "Ã", "Ä", "Å", "Æ", "Ç", "È", "É", "Ê", "Ë", "Ì", "Í", "Î", "Ï", "Ð", "Ñ", "Ò", "Ó", "Ô", "Õ", "Ö", "×", "Ø", "Ù", "Ú", "Û", "Ü", "Ý", "Þ", "ß", "à", "á", "â", "ã", "ä", "å", "æ", "ç", "è", "é", "ê", "ë", "ì", "í", "î", "ï", "ð", "ñ", "ò", "ó", "ô", "õ", "ö", "÷", "ø", "ù", "ú", "û", "ü", "ý", "þ", "ÿ", "Œ", "œ", "Š", "š", "Ÿ", "ƒ");
我创建了一个 javascript 文件，该文件具有很多功能，包括上述功能。 http://www.neotropicsolutions.com/JSChars.zip
包括所有需要的文件。我添加了 jQuery 1.4.4。只是因为我在其他版本中看到了问题，还没有尝试过。
Requires: jQuery & jQuery Impromptu from: http://trentrichardson.com/Impromptu/index.php
1. Word Count
2. Character Conversion
3. Checks to ensure this is not passed: "notsomeverylongstringmissingspaces"
4. Checks to make sure ALL IS NOT ALL UPPERCASE.
5. Strip HTML
// Word Counter
$.getScript('js/characters.js',function(){
$('#adtxt').bind("keyup click blur focus change paste",
function(event){
TextCheck.wordCount(30, "#adtxt", "#adtxt_count", event);
});
$('#adtxt').blur(
function(event){
TextCheck.check_length('#adtxt'); // unsures properly spaces-not one long word
TextCheck.doCWBind('#adtxt');// char conversion
});
TextCheck.wordCount(30, "#adtxt", "#adtxt_count", false);
});
//HTML
<textarea name="adtxt" id="adtxt" rows="10" cols="70" class="wordCount"></textarea>
<div id="adtxt_count" class="clear"></div>
// Just Character Conversions:
TextCheck.doCWBind('#myfield');
// Run through form fields in a form for case checking.
// Alerts user when field is blur'd.
var labels = new Array("Brief Description","Website URL","Contact Name","Website","Email","Linkback URL");
var checking = new Array("descr","title","fname","website","email","linkback");
TextCheck.check_it(checking,labels);
// Extra security to check again, make sure form is not submitted
var pass = TextCheck.validate(checking,labels);
if(pass){
//do form actions
}
//Strip HTML
<textarea name="adtxt" id="adtxt" rows="10" cols="70" onblur="TextCheck.stripHTML(this);"></textarea>
【讨论】：
【讨论】：
在PRE 标记中 - 以及大多数其他 HTML 标记中 - 使用输出重定向字符（）的批处理文件的纯文本会破坏 HTML，但 这是我的提示：任何东西都放在TEXTAREA元素中——它不会破坏HTML，主要是因为我们在一个由操作系统实例化和处理的控件中，因此它的内容不会被HTML引擎解析。
例如，假设我想使用 javascript 突出显示批处理文件的语法。我只需将代码粘贴到 textarea 中，而不用担心 HTML 保留字符，并让脚本处理 textarea 的 innerHTML 属性，该属性评估文本并将 HTML 保留字符替换为相应的 ISO-8859-1 实体.
当您检索元素的innerHTML（和outerHTML）属性时，浏览器会自动转义特殊字符。使用 textarea（谁知道呢，可能是文本类型的输入）只是让您免于进行转换（手动或通过代码）。
我使用这个技巧来测试我的语法荧光笔，当我完成创作和测试时，我只是将文本区域隐藏起来。
【讨论】：
来自 Mozilla ...
请注意，charCodeAt 将始终返回小于 65,536 的值。这是因为较高的代码点由一对（较低值的）“代理”伪字符表示，这些伪字符用于组成真实字符。因此，为了检查或再现值 65,536 及以上的单个字符的完整字符，对于此类字符，不仅需要检索 charCodeAt(i)，还需要检索 charCodeAt(i+1)（就像检查/复制一个带有两个>字母的字符串）。
最佳解决方案
/**
* (c) 2012 Steven Levithan <http://slevithan.com/>
* MIT license
*/
if (!String.prototype.codePointAt) {
String.prototype.codePointAt = function (pos) {
pos = isNaN(pos) ? 0 : pos;
var str = String(this),
code = str.charCodeAt(pos),
next = str.charCodeAt(pos + 1);
// If a surrogate pair
if (0xD800 <= code && code <= 0xDBFF && 0xDC00 <= next && next <= 0xDFFF) {
return ((code - 0xD800) * 0x400) + (next - 0xDC00) + 0x10000;
}
return code;
};
}
/**
* Encodes special html characters
* @param string
* @return {*}
*/
function html_encode(string) {
var ret_val = '';
for (var i = 0; i < string.length; i++) {
if (string.codePointAt(i) > 127) {
ret_val += '&#' + string.codePointAt(i) + ';';
} else {
ret_val += string.charAt(i);
}
}
return ret_val;
}
使用示例：
html_encode("✈");
【讨论】：
解决方法：
var temp = $("div").text("<");
var afterEscape = temp.html(); // afterEscape == "<"
【讨论】：
正如dragon 所提到的，最干净的方法是使用jQuery：
function HtmlEncode(s) {
return $('<div>').text(s).html();
}
function HtmlDecode(s) {
return $('<div>').html(s).text();
}
【讨论】：
encodeURI 用于对 URL 进行编码而不是 HTML...它是错误的工作工具。
这并不能直接回答您的问题，但如果您使用 innerHTML 在元素中写入文本并且遇到编码问题，只需使用 textContent，即：
var s = "Foo 'bar' baz <qux>";
var element = document.getElementById('foo');
element.textContent = s;
// <div id="foo">Foo 'bar' baz <qux></div>
【讨论】：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html</title>
<script>
$(function() {
document.getElementById('test').innerHTML = "&";
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>
您可以使用上面的代码简单地将特殊字符转换为 html。
【讨论】：
这是一个很好的库，我发现在这种情况下非常有用。
https://github.com/mathiasbynens/he
根据其作者：
它支持按照 HTML 的所有标准化命名字符引用， 像浏览器一样处理模棱两可的＆符号和其他边缘情况 会，有一个广泛的测试套件，并且 - 与许多其他 JavaScript 解决方案——他可以很好地处理星体 Unicode 符号
【讨论】：
以下是我使用的几种不需要 Jquery 的方法：
您可以编码字符串中的每个字符：
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
或者只针对主要的安全编码字符来担心（&、inebreaks、、“和'），例如：
function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}
test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');
/*************
* \x26 is &ersand (it has to be first),
* \x0A is newline,
*************/<textarea id=test rows="9" cols="55">www.WHAK.com</textarea>【讨论】：
如果您需要对 all standardized named character references、unicode 和 ambiguous ampersands 的支持，he 库是我所知道的唯一 100% 可靠的解决方案！
he.encode('foo © bar ≠ baz ? qux');
// Output : 'foo © bar ≠ baz 𝌆 qux'
he.decode('foo © bar ≠ baz 𝌆 qux');
// Output : 'foo © bar ≠ baz ? qux'
【讨论】：
对于那些想要解码字符串中的整数字符代码（如&#xxx;）的用户，请使用此函数：
function decodeHtmlCharCodes(str) {
return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
return String.fromCharCode(charCode);
});
}
// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));const decodeHtmlCharCodes = str =>
str.replace(/(&#(\d+);)/g, (match, capture, charCode) =>
String.fromCharCode(charCode));
// Will output "The show that gained int’l reputation’!"
console.log(decodeHtmlCharCodes('The show that gained int’l reputation’!'));【讨论】：
我们可以使用javascript DOMParser 进行特殊字符的转换。
const parser = new DOMParser();
const convertedValue = (parser.parseFromString("' & ' < >", "application/xml").body.innerText;
【讨论】：
以下是在JS中编码xml转义字符的简单函数
Encoder.htmlEncode(unsafeText);
【讨论】：
如果您使用lodash，您可以这样做（从文档复制粘贴）：
_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'
【讨论】：
我自己为此苦苦挣扎了很长一段时间，但最终决定使用这种否定匹配正则表达式来匹配所有特殊字符并将它们转换为相关的字符代码：
var encoded = value.replace(/[^A-Za-z0-9]/g, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
【讨论】：