淘先锋技术网

首页 1 2 3 4 5 6 7

json双引号转html

最近在开发Web应用的过程中，遇到了一些把JSON中的双引号转换成HTML实体的问题。这是因为HTML中，双引号是需要转义的字符，而JSON中有很多的字符串数据都会带有双引号，如果这些双引号不进行转义，就会导致HTML解析出错或者渲染不正常。


// 这是一个JSON数据
{
  "name": "Tom",
  "age": 20,
  "address": "No. 1234, XYZ Street",
  "desc": "He said, \"Hello, World!\""
}

json双引号转html

在上面的JSON数据中，desc这个属性中包含了英文双引号，如果我们将其直接输出到HTML页面中，就会出现问题。例如：


<div>
  <p>{“desc”:”He said, “Hello, World!””}</p>
</div>

上面的HTML代码中，desc属性的双引号没有进行转义，在浏览器中渲染的时候就会出现错误，因为浏览器认为双引号为字符串的结束符而报错。

解决这个问题的方法就是需要将JSON中的双引号转义成HTML实体。比较常用的一种方法是使用JavaScript的replace函数，例如：


// 通过replace函数将JSON字符串中所有的双引号转义
var jsonStr = '{ "name": "Tom", "age": 20, "address": "No. 1234, XYZ Street", "desc": "He said, \\"Hello, World!\\"" }';
var htmlStr = jsonStr.replace(/"/g, '&quot;');
<div>
  <p>{{“name”:”Tom”, “age”: 20, “address”: No. 1234, XYZ Street, “desc”: He said, &quot;Hello, World!&quot; }}</p>
</div>

上述代码先是定义了一个JSON字符串jsonStr，然后通过replace函数将其中的双引号替换成HTML的实体&quot;，最后将转换后的字符串输出到了一个div标签中。我们可以看到，HTML实体在浏览器中被成功地渲染出来了，解决了双引号转义的问题。