在 JavaScript 中編碼 HTML 實體
[英]Encode HTML entities in JavaScript
問題描述
我在一個允許用戶輸入內容的 CMS 中工作。 問題是當他們添加符號® ，它可能無法在所有瀏覽器中很好地顯示。 我想設置一個必須搜索的符號列表，然后轉換為相應的html實體。 例如
® => ®
& => &
© => ©
™ => ™
轉換后需要用<sup>標簽包裹，結果如下：
® => <sup>®</sup>
因為需要特定的字體大小和填充樣式：
sup { font-size: 0.6em; padding-top: 0.2em; }
JavaScript 會是這樣嗎？
var regs = document.querySelectorAll('®');
for ( var i = 0, l = imgs.length; i < l; ++i ) {
var [?] = regs[i];
var [?] = document.createElement('sup');
img.parentNode.insertBefore([?]);
div.appendChild([?]);
}
其中“[?]”表示有一些我不確定的事情。
額外細節：
- 我想用純 JavaScript 來做到這一點，而不是需要像 jQuery 這樣的庫，謝謝。
- 后端是 Ruby
- 使用由 Ruby on Rails 構建的 RefineryCMS
18 個解決方案
解決方案1
209 已采納 2013-09-11 19:50:29
您可以使用正則表達式將給定 unicode 范圍內的任何字符替換為其等效的 html 實體。 代碼看起來像這樣：
var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
return '&#'+i.charCodeAt(0)+';';
});
此代碼將替換給定范圍內的所有字符（unicode 00A0 - 9999，以及＆符號，大於和小於）與其等效的 html 實體，這只是&#nnn; 其中nnn是我們從charCodeAt獲得的 unicode 值。
在此處查看操作： http : //jsfiddle.net/E3EqX/13/ （此示例使用 jQuery 作為示例中使用的元素選擇器。上面的基本代碼本身不使用 jQuery）
進行這些轉換並不能解決所有問題——確保您使用的是 UTF8 字符編碼，確保您的數據庫以 UTF8 存儲字符串。 您仍然可能會看到字符顯示不正確的情況，這取決於系統字體配置和您無法控制的其他問題。
文檔
解決方案2
66 2014-05-23 16:58:27
當前接受的答案有幾個問題。 這篇文章解釋了它們，並提供了一個更強大的解決方案。 該答案中建議的解決方案以前有：
var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
return '&#' + i.charCodeAt(0) + ';';
});
i標志是多余的，因為從 U+00A0 到 U+9999 范圍內的任何 Unicode 符號都沒有在同一范圍之外的大寫/小寫變體。
m標志是多余的，因為^或$未在正則表達式中使用。
為什么范圍是 U+00A0 到 U+9999？ 似乎是隨意的。
無論如何，對於在輸入中正確編碼除安全和可打印 ASCII 符號之外的所有符號（包括星形符號！）並實現所有命名字符引用（不僅僅是 HTML4 中的那些）的解決方案，請使用he庫（免責聲明：這個庫是我的） ）。 從它的自述文件：
he （代表“HTML 實體”）是一個用 JavaScript 編寫的強大的 HTML 實體編碼器/解碼器。 它支持所有標准化的 HTML 命名字符引用， 像瀏覽器一樣處理模糊的＆符號和其他邊緣情況，具有廣泛的測試套件，並且——與許多其他 JavaScript 解決方案相反——他可以很好地處理星體 Unicode 符號。 提供在線演示。
另請參閱此相關堆棧溢出答案。
解決方案3
30 2014-11-19 15:14:06
我遇到了同樣的問題並創建了 2 個函數來創建實體並將它們轉換回正常字符。 以下方法將任何字符串轉換為 HTML 實體並返回字符串原型
/**
* Convert a string to HTML entities
*/
String.prototype.toHtmlEntities = function() {
return this.replace(/./gm, function(s) {
// return "&#" + s.charCodeAt(0) + ";";
return (s.match(/[a-z0-9\s]+/i)) ? s : "&#" + s.charCodeAt(0) + ";";
});
};
/**
* Create string from HTML entities
*/
String.fromHtmlEntities = function(string) {
return (string+"").replace(/&#\d+;/gm,function(s) {
return String.fromCharCode(s.match(/\d+/gm)[0]);
})
};
然后，您可以按如下方式使用它：
var str = "Test´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en tést".toHtmlEntities();
console.log("Entities:", str);
console.log("String:", String.fromHtmlEntities(str));
控制台輸出：
Entities: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést
解決方案4
23 2015-04-07 02:37:04
沒有任何庫，如果您不需要支持 IE < 9，您可以創建一個 html 元素並使用Node.textContent設置其內容：
var str = "<this is not a tag>";
var p = document.createElement("p");
p.textContent = str;
var converted = p.innerHTML;
這是一個例子： https : //jsfiddle.net/1erdhehv/
更新：這僅適用於 HTML 標記實體（&、< 和 >）。
解決方案5
21 2016-08-31 07:46:22
你可以用這個。
var escapeChars = {
'¢' : 'cent',
'£' : 'pound',
'¥' : 'yen',
'€': 'euro',
'©' :'copy',
'®' : 'reg',
'<' : 'lt',
'>' : 'gt',
'"' : 'quot',
'&' : 'amp',
'\'' : '#39'
};
var regexString = '[';
for(var key in escapeChars) {
regexString += key;
}
regexString += ']';
var regex = new RegExp( regexString, 'g');
function escapeHTML(str) {
return str.replace(regex, function(m) {
return '&' + escapeChars[m] + ';';
});
};
https://github.com/epeli/underscore.string/blob/master/escapeHTML.js
var htmlEntities = {
nbsp: ' ',
cent: '¢',
pound: '£',
yen: '¥',
euro: '€',
copy: '©',
reg: '®',
lt: '<',
gt: '>',
quot: '"',
amp: '&',
apos: '\''
};
function unescapeHTML(str) {
return str.replace(/\&([^;]+);/g, function (entity, entityCode) {
var match;
if (entityCode in htmlEntities) {
return htmlEntities[entityCode];
/*eslint no-cond-assign: 0*/
} else if (match = entityCode.match(/^#x([\da-fA-F]+)$/)) {
return String.fromCharCode(parseInt(match[1], 16));
/*eslint no-cond-assign: 0*/
} else if (match = entityCode.match(/^#(\d+)$/)) {
return String.fromCharCode(~~match[1]);
} else {
return entity;
}
});
};
解決方案6
7 2018-01-03 08:07:41
如果您想避免多次編碼 html 實體
function encodeHTML(str){
return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) {
if(char !== '&' || next !== '#'){
if(/[\u00A0-\u9999<>&]/.test(next))
next = '&#' + next.charCodeAt(0) + ';';
return '&#' + char.charCodeAt(0) + ';' + next;
}
return full;
});
}
function decodeHTML(str){
return str.replace(/&#([0-9]+);/g, function(full, int) {
return String.fromCharCode(parseInt(int));
});
}
＃ 例子
var text = "<a>Content © <#>&<&#># </a>";
text = encodeHTML(text);
console.log("Encode 1 times: " + text);
// <a>Content © <#>&<&#># </a>
text = encodeHTML(text);
console.log("Encode 2 times: " + text);
// <a>Content © <#>&<&#># </a>
text = decodeHTML(text);
console.log("Decoded: " + text);
// <a>Content © <#>&<&#># </a>
解決方案7
5 2015-02-26 16:42:18
如果您已經在使用 jQuery，請嘗試html() 。
$('<div>').text('<script>alert("gotcha!")</script>').html()
// "<script>alert("gotcha!")</script>"
實例化內存中的文本節點，並在其上調用html() 。
它很丑，浪費了一點內存，我不知道它是否像he庫一樣徹底，但如果你已經在使用 jQuery，也許這對你來說是一個選擇。
取自 Felix Geisendörfer 的博文Encode HTML entity with jQuery 。
解決方案8
4 2016-10-27 13:03:12
HTML 特殊字符及其ESCAPE CODES
保留字符必須由 HTML 轉義：我們可以使用字符轉義來表示 HTML、XHTML 或 XML 中的任何 Unicode 字符 [例如：& - U+00026] 僅使用 ASCII 字符。 數字字符引用[例如： & (&) - & ] & 命名字符引用[例如： & ] 是character escape used in markup的character escape used in markup類型。
預定義實體
原始字符XML 實體替換XML 數字替換
< < <
> > >
“ " "
& & &
' ' '
為了在網頁中將 HTML 標簽顯示為普通形式，我們使用<pre> 、 <code>標簽或者我們可以對它們進行轉義。 通過用字符串"&"替換任何出現的"&"字符來轉義字符串以及字符串">" ">"出現的任何">"字符 . 例如： stackoverflow post
function escapeCharEntities() {
var map = {
"&": "&",
"<": "<",
">": ">",
"\"": """,
"'": "'"
};
return map;
}
var mapkeys = '', mapvalues = '';
var html = {
encodeRex : function () {
return new RegExp(mapkeys, 'g'); // "[&<>"']"
},
decodeRex : function () {
return new RegExp(mapvalues, 'g'); // "(&|<|>|"|')"
},
encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&", <: "<", >: ">", ": """, ': "'"}
decodeMap : JSON.parse( JSON.stringify( swapJsonKeyValues( escapeCharEntities () ) ) ),
encode : function ( str ) {
var encodeRexs = html.encodeRex();
console.log('Encode Rex: ', encodeRexs); // /[&<>"']/gm
return str.replace(encodeRexs, function(m) { console.log('Encode M: ', m); return html.encodeMap[m]; }); // m = < " > SpecialChars
},
decode : function ( str ) {
var decodeRexs = html.decodeRex();
console.log('Decode Rex: ', decodeRexs); // /(&|<|>|"|')/g
return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = < " >
}
};
function swapJsonKeyValues ( json ) {
var count = Object.keys( json ).length;
var obj = {};
var keys = '[', val = '(', keysCount = 1;
for(var key in json) {
if ( json.hasOwnProperty( key ) ) {
obj[ json[ key ] ] = key;
keys += key;
if( keysCount < count ) {
val += json[ key ]+'|';
} else {
val += json[ key ];
}
keysCount++;
}
}
keys += ']'; val += ')';
console.log( keys, ' == ', val);
mapkeys = keys;
mapvalues = val;
return obj;
}
console.log('Encode: ', html.encode('<input type="password" name="password" value=""/>') );
console.log('Decode: ', html.decode(html.encode('<input type="password" name="password" value=""/>')) );
O/P:
Encode: <input type="password" name="password" value=""/>
Decode: <input type="password" name="password" value=""/>
解決方案9
3 2018-05-21 23:32:38
var htmlEntities = [
{regex:/&/g,entity:'&'},
{regex:/>/g,entity:'>'},
{regex:/</g,entity:'<'},
{regex:/"/g,entity:'"'},
{regex:/á/g,entity:'á'},
{regex:/é/g,entity:'é'},
{regex:/í/g,entity:'í'},
{regex:/ó/g,entity:'ó'},
{regex:/ú/g,entity:'ú'}
];
total = <some string value>
for(v in htmlEntities){
total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}
陣列解決方案
解決方案10
1 2015-07-26 12:54:45
有時您只想對每個字符進行編碼...此函數替換 regxp 中的“除任何之外的一切”。
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}
function encode(w) { return w.replace(/[^]/g, function(w) { return "&#" + w.charCodeAt(0) + ";"; }); } test.value=encode(document.body.innerHTML.trim());
<textarea id=test rows=11 cols=55>www.WHAK.com</textarea>
解決方案11
1 2020-08-14 20:25:49
查看來自 Ourcodeworld Ourcodeworld的教程- 使用 javascript 編碼和解碼 html 實體
最重要的是，他圖書館的例子
he.encode('foo © bar ≠ baz ???? qux');
// → 'foo © bar ≠ baz 𝌆 qux'
// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
'encodeEverything': true
});
he.decode('foo © bar ≠ baz 𝌆 qux');
// → 'foo © bar ≠ baz ???? qux'
這個庫可能會讓你的編碼更容易，更好地管理。 它很受歡迎，定期更新並遵循 HTML 規范。 它本身沒有依賴關系，可以在package.json 中看到
解決方案12
1 2020-08-23 02:02:30
這是我實現編碼的方式。 我從上面給出的答案中獲得靈感。
function encodeHTML(str) { const code = { ' ' : ' ', '¢' : '¢', '£' : '£', '¥' : '¥', '€' : '€', '©' : '©', '®' : '®', '<' : '<', '>' : '>', '"' : '"', '&' : '&', '\\'' : ''' }; return str.replace(/[\ -\香<>\\&''""]/gm, (i)=>code[i]); } // TEST console.log(encodeHTML("Dolce & Gabbana")); console.log(encodeHTML("Hamburgers < Pizza < Tacos")); console.log(encodeHTML("Sixty > twelve")); console.log(encodeHTML('Stuff in "quotation marks"')); console.log(encodeHTML("Schindler's List")); console.log(encodeHTML("<>"));
解決方案13
0 2021-01-06 08:39:25
編碼或解碼 HTML 實體的簡便方法之一
只用一個參數調用一個函數......
解碼 HTML 實體
function decodeHTMLEntities(text) {
var textArea = document.createElement('textarea');
textArea.innerHTML = text;
return textArea.value;
}
解碼 HTML 實體 (JQuery)
function decodeHTMLEntities(text) {
return $("<textarea/>").html(text).text();
}
編碼 HTML 實體
function encodeHTMLEntities(text) {
var textArea = document.createElement('textarea');
textArea.innerText = text;
return textArea.innerHTML;
}
編碼 HTML 實體 (JQuery)
function encodeHTMLEntities(text) {
return $("<textarea/>").text(text).html();
}
解決方案14
0 2021-01-28 17:46:21
htmlentities()轉換 HTML 實體
因此，我們構建了一個常量，其中包含我們要轉換的 html 標簽。
const htmlEntities = [
{regex:'&',entity:'&'},
{regex:'>',entity:'>'},
{regex:'<',entity:'<'}
];
我們構建了一個函數，將所有相應的 html 字符轉換為字符串：Html ==> String
function htmlentities (s){
var reg;
for (v in htmlEntities) {
reg = new RegExp(htmlEntities[v].regex, 'g');
s = s.replace(reg, htmlEntities[v].entity);
}
return s;
}
為了解碼，我們構建了一個反向函數，它將所有字符串轉換為它們的等效 html 。 字符串 ==> html
function html_entities_decode (s){
var reg;
for (v in htmlEntities) {
reg = new RegExp(htmlEntities[v].entity, 'g');
s = s.replace(reg, htmlEntities[v].regex);
}
return s;
}
之后，我們可以使用 encodeURIComponent() 對所有其他特殊字符 (é è ...) 進行編碼
用例
var s = '<div> God bless you guy </div> '
var h = encodeURIComponent(htmlentities(s)); /** To encode */
h = html_entities_decode(decodeURIComponent(h)); /** To decode */
解決方案15
0 2021-03-14 06:32:49
函數 htmlEntityReplacer(encoded_text) { var decoded_text = encoding_text;
const all_entities = [{ /* source: https://www.w3schools.com/html/html_entities.asp */
encoded: ` `,
decoded: ` `
}, {
encoded: `<`,
decoded: `<`
}, {
encoded: `>`,
decoded: `>`
}, {
encoded: `&`,
decoded: `&`
}, {
encoded: `"`,
decoded: `"`
}, {
encoded: `'`,
decoded: `'`
}, {
encoded: `¢`,
decoded: `¢`
}, {
encoded: `£`,
decoded: `£`
}, {
encoded: `¥`,
decoded: `yen`
}, {
encoded: `€`,
decoded: `€`
}, {
encoded: `©`,
decoded: `©`
}, {
encoded: `®`,
decoded: `®`
}]
for (i = 0; i < all_entities.length; i++) {
var decoded_text = decoded_text.replace(new RegExp(all_entities[i].encoded, 'g'), all_entities[i].decoded)
}
return decoded_text;
}
// 對於節點或香草
解決方案16
-1 2013-09-11 19:52:01
您可以使用charCodeAt()方法檢查指定字符的值是否大於 127，並使用toString(16)將其轉換為數字字符引用。
解決方案17
-1 2019-06-15 16:39:46
replaceHtmlEntities(text) {
var tagsToReplace = {
'&': '&',
'<': '<',
'>': '>',
};
var newtext = text;
for (var tag in tagsToReplace) {
if (Reflect.apply({}.hasOwnProperty, this, [tagsToReplace, tag])) {
var regex = new RegExp(tag, 'g');
newtext = newtext.replace(regex, tagsToReplace[tag]);
}
}
return newtext;
}
解決方案18
-1 2020-06-18 11:36:25
<!DOCTYPE html> <html> <style> button { backround: #ccc; padding: 14px; width: 400px; font-size: 32px; } #demo { font-size: 20px; font-family: Arial; font-weight: bold; } </style> <body> <p>Click the button to decode.</p> <button onclick="entitycode()">Html Code</button> <p id="demo"></p> <script> function entitycode() { var uri = "quotation = ark __ ' = apostrophe __ & = ampersand __ < = less-than __ > = greater-than __ non- = reaking space __ ¡ = inverted exclamation mark __ ¢ = cent __ £ = pound __ ¤ = currency __ ¥ = yen __ ¦ = broken vertical bar __ § = section __ ¨ = spacing diaeresis __ © = copyright __ ª = feminine ordinal indicator __ « = angle quotation mark (left) __ ¬ = negation __ ­ = soft hyphen __ ® = registered trademark __ ¯ = spacing macron __ ° = degree __ ± = plus-or-minus __ ² = superscript 2 __ ³ = superscript 3 __ ´ = spacing acute __ µ = micro __ ¶ = paragraph __ · = middle dot __ ¸ = spacing cedilla __ ¹ = superscript 1 __ º = masculine ordinal indicator __ » = angle quotation mark (right) __ ¼ = fraction 1/4 __ ½ = fraction 1/2 __ ¾ = fraction 3/4 __ ¿ = inverted question mark __ × = multiplication __ ÷ = division __ À = capital a, grave accent __ Á = capital a, acute accent __ Â = capital a, circumflex accent __ Ã = capital a, tilde __ Ä = capital a, umlaut mark __ Å = capital a, ring __ Æ = capital ae __ Ç = capital c, cedilla __ È = capital e, grave accent __ É = capital e, acute accent __ Ê = capital e, circumflex accent __ Ë = capital e, umlaut mark __ Ì = capital i, grave accent __ Í = capital i, acute accent __ Î = capital i, circumflex accent __ Ï = capital i, umlaut mark __ Ð = capital eth, Icelandic __ Ñ = capital n, tilde __ Ò = capital o, grave accent __ Ó = capital o, acute accent __ Ô = capital o, circumflex accent __ Õ = capital o, tilde __ Ö = capital o, umlaut mark __ Ø = capital o, slash __ Ù = capital u, grave accent __ Ú = capital u, acute accent __ Û = capital u, circumflex accent __ Ü = capital u, umlaut mark __ Ý = capital y, acute accent __ Þ = capital THORN, Icelandic __ ß = small sharp s, German __ à = small a, grave accent __ á = small a, acute accent __ â = small a, circumflex accent __ ã = small a, tilde __ ä = small a, umlaut mark __ å = small a, ring __ æ = small ae __ ç = small c, cedilla __ è = small e, grave accent __ é = small e, acute accent __ ê = small e, circumflex accent __ ë = small e, umlaut mark __ ì = small i, grave accent __ í = small i, acute accent __ î = small i, circumflex accent __ ï = small i, umlaut mark __ ð = small eth, Icelandic __ ñ = small n, tilde __ ò = small o, grave accent __ ó = small o, acute accent __ ô = small o, circumflex accent __ õ = small o, tilde __ ö = small o, umlaut mark __ ø = small o, slash __ ù = small u, grave accent __ ú = small u, acute accent __ û = small u, circumflex accent __ ü = small u, umlaut mark __ ý = small y, acute accent __ þ = small thorn, Icelandic __ ÿ = small y, umlaut mark"; var enc = encodeURI(uri); var dec = decodeURI(enc); var res = dec; document.getElementById("demo").innerHTML = res; } </script> </body> </html>
使用Opencart中的Javascript或JQuery編碼和解碼HTML實體
[英]Encode and decode HTML entities using Javascript or JQuery in Opencart
原生 JavaScript 或 ES6 編碼和解碼 HTML 實體的方式？
[英]Native JavaScript or ES6 way to encode and decode HTML entities?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.