在javascript中编码html实体 [英] Encode html entities in javascript

问题描述

我在一个允许用户输入内容的CMS中工作。问题是，当他们添加符号®时，它可能无法在所有浏览器中正常显示。我想设置一个必须搜索的符号列表，然后转换为相应的html实体。例如

®=> & reg;

& => & amp;

©=> & copy;

™=> & trade;

转换后，需要将其包装在< sup> 标记中，导致：

® => < sup>& reg;< / sup>




因为特定的字体大小和填充风格是必要的：



sup {font-size：0.6em;填充顶部：0.2em; }

JavaScript会是这样的吗？

  var regs = document.querySelectorAll（'®'）; 
 for（var i = 0，l = imgs.length; i  var [？] = regs [i]; 
 var [？] = document.createElement（'sup'）; 
 img.parentNode.insertBefore（[？]）; 
 div.appendChild（[？]）; 
 
 $ / code> 

其中[？]表示存在某些我不确定的内容



其他详细信息：



<李>我想用纯JavaScript做到这一点，而不是
需要像jQuery这样的库，谢谢。

• 后端是Ruby


• 使用由Ruby on Rails构建的RefineryCMS

解决方案

你可以使用正则表达式来替换给定unicode范围内的任何字符及其html实体等价物。代码看起来像这样：

  var encodedStr = rawStr.replace（/ [\\\ -\\\香<> ; \&] / gim，function（i）{
 return'&＃'+ i.charCodeAt（0）+';'; 
}）; 
  

此代码将替换给定范围内的所有字符（unicode 00A0 - 9999，以及&符号，更大和更小）与它们的html实体等价物相关联，它简单地是& #nnn; 其中 nnn 是我们从 charCodeAt 获得的unicode值。

请参阅此处的操作： http://jsfiddle.net/E3EqX/13/ （本示例使用jQuery作为示例中使用的元素选择器，上面的基本代码本身，不使用jQuery）

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

文档
$ b

• String.charCodeAt - https://developer.mozilla.org/zh-CN/docs/ Web / JavaScript / Reference / Global_Objects / String / charCodeAt


• HTML字符实体 - http://www.chucke.com/entities.html

I am working in a CMS which allows users to enter content. The problem is that when they add symbols ® , it may not display well in all browsers. I would like to set up a list of symbols that must be searched for, and then converted to the corresponding html entity. For example

® => ®
& => &
© => ©
™ => ™

After the conversion, it needs to be wrapped in a <sup> tag, resulting in this:

® => <sup>&reg;</sup>

Because a particular font size and padding style is necessary:

sup { font-size: 0.6em; padding-top: 0.2em; }

Would the JavaScript be something like this?

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

Where "[?]" means that there is something that I am not sure about.

Additional Details:

• I would like to do this with pure JavaScript, not something that requires a library like jQuery, thanks.
• Backend is Ruby
• Using RefineryCMS which is built with Ruby on Rails

解决方案

You can use regex to replace any character in a given unicode range with its html entity equivalent. The code would look something like this:

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

This code will replace all characters in the given range (unicode 00A0 - 9999, as well as ampersand, greater & less than) with their html entity equivalents, which is simply &#nnn; where nnn is the unicode value we get from charCodeAt.

See it in action here: http://jsfiddle.net/E3EqX/13/ (this example uses jQuery for element selectors used in the example. The base code itself, above, does not use jQuery)

Making these conversions does not solve all the problems -- make sure you're using UTF8 character encoding, make sure your database is storing the strings in UTF8. You still may see instances where the characters do not display correctly, depending on system font configuration and other issues out of your control.

Documentation

• String.charCodeAt - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
• HTML Character entities - http://www.chucke.com/entities.html

这篇关于在javascript中编码html实体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！