用JavaScript编码HTML实体

我在一个允许用户输入内容的CMS中工作。问题是，当他们添加符号时，它可能不会在所有浏览器中都很好地显示。我想设置一个必须搜索的符号列表，然后将其转换为相应的html实体。比如说

®=>

®

&=>
&

©=>
&复制

™ => <代码>&贸易

转换后，需要将其包装在
标记中，结果是：

®
=>
®

因为需要特定的字体大小和填充样式：

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([?]);
}

var regs=document.querySelectorAll（“®”）；
对于（变量i=0，l=imgs.length；i

其中“[？]”表示有一些我不确定的事情

其他详细信息：


我希望使用纯JavaScript来实现这一点，而不是
需要像jQuery这样的库，谢谢
后端是Ruby
使用由Ruby on Rails构建的RefineryCMS
您可以使用正则表达式将给定unicode范围内的任何字符替换为其html实体等效项。代码如下所示：

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

var encodedStr=rawStr.replace（/[\u00A0-\u9999\&]/g，函数（i）{
返回'&#'+i.charCodeAt（0）+'；'；
});

此代码将用其html实体等价物替换给定范围内的所有字符（unicode 00A0-9999，以及大于和小于的符号），即
&#nnn
其中
nnn
是我们从
charCodeAt
获得的unicode值

请参见此处的操作：（此示例使用jQuery作为示例中使用的元素选择器。上面的基本代码本身不使用jQuery）

进行这些转换并不能解决所有问题——确保使用UTF8字符编码，确保数据库将字符串存储在UTF8中。根据系统字体配置和其他您无法控制的问题，您仍然可以看到字符显示不正确的情况

文档


String.charCodeAt
-
HTML字符实体-
您可以使用
charCodeAt（）
方法检查指定字符的值是否大于127，并使用
toString（16）
将其转换为数字字符引用。这篇文章解释了它们，并提供了一个更健壮的解决方案。该答复中提出的解决办法以前有：

var encodedStr = rawStr.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
  return '&#' + i.charCodeAt(0) + ';';
});

var encodedStr=rawStr.replace（/[\u00A0-\u9999\&]/gim，函数（i）{
返回'&#'+i.charCodeAt（0）+'；'；
});

i
标志是多余的，因为从U+00A0到U+9999范围内的任何Unicode符号的大小写变体都不在同一范围内

m
标志是多余的，因为在正则表达式中未使用
^
或
$

为什么范围在U+00A0到U+9999之间？这似乎是武断的

无论如何，对于在输入中正确编码除安全和可打印ASCII符号外的所有字符（包括星体符号！）并实现所有命名字符引用（不仅仅是HTML4中的字符引用）的解决方案，（免责声明：此库是我的）。自述：

他（代表“HTML实体”）是一个用JavaScript编写的健壮的HTML实体编码器/解码器。它支持、处理和其他边缘情况，具有广泛的测试套件，并且-与许多其他JavaScript解决方案相反-他可以很好地处理astral Unicode符号

另请参见。
我也遇到了同样的问题，创建了两个函数来创建实体并将它们转换回普通字符。
以下方法将任何字符串转换为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: &#68;&#105;&#116;&#32;&#105;&#115;&#32;&#101;&#180;&#8224;&#174;&#165;&#168;&#169;&#729;&#8747;&#248;&#8230;&#710;&#402;&#8710;&#247;&#8721;&#8482;&#402;&#8710;&#230;&#248;&#960;&#163;&#168;&#160;&#402;&#8482;&#101;&#110;&#32;&#116;&#163;&#101;&#233;&#115;&#116;
String: Dit is e´†®¥¨©˙∫ø…ˆƒ∆÷∑™ƒ∆æø𣨠ƒ™en t£eést 

如果您已经在使用jQuery，请尝试

$（“”）.text（'alert（“gotcha！”））.html（）
//scriptalert（“抓住！”）/script

内存中的文本节点被实例化，并对其调用
html（）

它很难看，浪费了一点内存，我不知道它是否像库一样彻底，但是如果你已经在使用jQuery，也许这是你的一个选择

摘自Felix Geisendörfer的博文。
没有任何库，如果您不需要支持IE<9，您可以创建一个html元素并使用以下内容设置其内容：

var-str=”“；
var p=document.createElement（“p”）；
p、 textContent=str；
var converted=p.innerHTML；

以下是一个例子：

更新：这只适用于HTML标记实体（&），
有时您只想对每个字符进行编码。。。此函数替换regxp中的“除零外的所有内容”

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}


函数编码（w）{
返回w.replace（/[^]/g，函数（w）{
返回“&#”+w.charCodeAt（0）+“；”；
});
}
test.value=encode（document.body.innerHTML.trim（））
www.WHAK.com
你可以使用这个

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] + ';';
  });
};

var escapeChars={
","分",，
"英镑":"英镑",，
“日元”：“日元”，
'欧元'：'欧元'，
“）：“复制”，
“®”：“reg”，
“‘gt’，
“：“quot”，
“&”：“amp”，
'\'' : '#39'
};
var regexString='['；
for（escapeChars中的var键）{
regexString+=键；
}
regexString+=']'；
var regex=new RegExp（regexString，'g'）；
函数escapeHTML（str）{
返回str.replace（正则表达式，函数（m）{
返回“&”+escapeChars[m]+'；”；
});
};


var htmlEntities={
nbsp:“，
分：“、”，
英镑：“£”，
日元：“¥”，
欧元：“€”，
副本：”），
注册：“®”，
lt:''，
引用：“”，
amp:“&”，
apos:“\”
function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

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] + ';';
  });
};

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;
        }
    });
};

function escapeCharEntities() {
    var map = {
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        "\"": "&quot;",
        "'": "&apos;"
    };
    return map;
}

var mapkeys = '', mapvalues = '';
var html = {
    encodeRex : function () {
        return  new RegExp(mapkeys, 'g'); // "[&<>"']"
    }, 
    decodeRex : function () {
        return  new RegExp(mapvalues, 'g'); // "(&amp;|&lt;|&gt;|&quot;|&apos;)"
    },
    encodeMap : JSON.parse( JSON.stringify( escapeCharEntities () ) ), // json = {&: "&amp;", <: "&lt;", >: "&gt;", ": "&quot;", ': "&apos;"}
    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); // /(&amp;|&lt;|&gt;|&quot;|&apos;)/g
        return str.replace(decodeRexs, function(m) { console.log('Decode M: ', m); return html.decodeMap[m]; }); // m = &lt; &quot; &gt;
    }
};

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:  &lt;input type=&quot;password&quot; name=&quot;password&quot; value=&quot;&quot;/&gt;
Decode:  <input type="password" name="password" value=""/>

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 &#169; <#>&<&#># </a>";

text = encodeHTML(text);
console.log("Encode 1 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = encodeHTML(text);
console.log("Encode 2 times: " + text);

// &#60;a&#62;Content &#169; &#60;#&#62;&#38;&#60;&#38;#&#62;# &#60;/a&#62;

text = decodeHTML(text);
console.log("Decoded: " + text);

// <a>Content © <#>&<&#># </a>

var htmlEntities = [
            {regex:/&/g,entity:'&amp;'},
            {regex:/>/g,entity:'&gt;'},
            {regex:/</g,entity:'&lt;'},
            {regex:/"/g,entity:'&quot;'},
            {regex:/á/g,entity:'&aacute;'},
            {regex:/é/g,entity:'&eacute;'},
            {regex:/í/g,entity:'&iacute;'},
            {regex:/ó/g,entity:'&oacute;'},
            {regex:/ú/g,entity:'&uacute;'}
        ];

total = <some string value>

for(v in htmlEntities){
    total = total.replace(htmlEntities[v].regex, htmlEntities[v].entity);
}

replaceHtmlEntities(text) {
  var tagsToReplace = {
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
  };
  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;
}

he.encode('foo © bar ≠ baz ???? qux');
// → 'foo &#xA9; bar &#x2260; baz &#x1D306; qux'

// Passing an `options` object to `encode`, to explicitly encode all symbols:
he.encode('foo © bar ≠ baz ???? qux', {
 'encodeEverything': true
});

he.decode('foo &copy; bar &ne; baz &#x1D306; qux');
// → 'foo © bar ≠ baz ???? qux'

function decodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = text;
  return textArea.value;
}

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

function encodeHTMLEntities(text) {
  var textArea = document.createElement('textarea');
  textArea.innerText = text;
  return textArea.innerHTML;
}

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

const htmlEntities = [ 
    {regex:'&',entity:'&amp;'},
    {regex:'>',entity:'&gt;'},
    {regex:'<',entity:'&lt;'} 
  ];

 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;
  }

 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;
  
   }

 var s  = '<div> God bless you guy   </div> '
 var h = encodeURIComponent(htmlentities(s));         /** To encode */
 h =  html_entities_decode(decodeURIComponent(h));     /** To decode */

const all_entities = [{ /* source: https://www.w3schools.com/html/html_entities.asp */
    encoded: `&nbsp;`,
    decoded: ` `
}, {
    encoded: `&lt;`,
    decoded: `<`
}, {
    encoded: `&gt;`,
    decoded: `>`
}, {
    encoded: `&amp;`,
    decoded: `&`
}, {
    encoded: `&quot;`,
    decoded: `"`
}, {
    encoded: `&apos;`,
    decoded: `'`
}, {
    encoded: `&cent;`,
    decoded: `¢`
}, {
    encoded: `&pound;`,
    decoded: `£`
}, {
    encoded: `&yen;`,
    decoded: `yen`
}, {
    encoded: `&euro;`,
    decoded: `€`
}, {
    encoded: `&copy;`,
    decoded: `©`
}, {
    encoded: `&reg;`,
    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;