用 JSON 编写 HTML 字符串答案

【问题标题】：Write HTML string in JSON用 JSON 编写 HTML 字符串
【发布时间】：2014-04-28 09:31:36
【问题描述】：

是否可以在 JSON 中编写 HTML 字符串？

我想在我的 JSON 文件中写如下：

[
    {
        "id": "services.html",
        "img": "img/SolutionInnerbananer.jpg",
        "html": "<h2class="fg-white">AboutUs</h2><pclass="fg-white">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>"
    }
]

【问题讨论】：

我对 JSON 不太了解，但我认为你应该在课后使用转义序列作为引号，" 像 \"。
请参考thorntech.com/2012/07/…

标签： javascript jquery html json

【解决方案1】：

您可以使用 html 在线编辑器，即每个 html 标签和括号都有一些 html 实体值，将这些标签特别是括号转换为相应的实体值例子

<h1>Hello<h1>

也可以写成：

&lt;h1&gt;Hello &lt;/h1&gt;

Html entites

Html editor

打开html编写html代码并点击源代码按钮 For php use this fucntions

【讨论】：

【解决方案2】：

如果你使用的是 Vue，你可以使用 v-html 指令。

<div class="columns>
    <p v-html="resource.body"></p>
</div>

【讨论】：

【解决方案3】：

假设我正在尝试呈现以下 HTML。

let myHTML = "<p>Go to this <a href='https://google.com'>website </b></p>";

JSON.parse(JSON.stringify(myHTML)) 这将为您提供一个 HTML 元素，您可以使用 innerHTML 对其进行设置。

像这样 document.getElementById("demo").innerHTML = JSON.parse(JSON.stringify(myHTML));

人们将他们的 HTML 存储为对象 here。然而，我建议的方法也不需要使用对象。

【讨论】：

这是完美的答案！

【解决方案4】：

在json中一切都是双引号之间的字符串“，所以你需要转义”如果它发生在值中（仅在直接写入中）使用反斜杠\

以及包裹在 {} 中的 json 文件中的所有内容将您的 json 更改为

{
  [
    {
      "id": "services.html",
      "img": "img/SolutionInnerbananer.jpg",
      "html": "<h2 class=\"fg-white\">AboutUs</h2><p class=\"fg-white\">developing and supporting complex IT solutions.Touching millions of lives world wide by bringing in innovative technology</p>"
    }
  ]
}

【讨论】：

【解决方案5】：

将 HTML 放入 JSON 时必须做的 4 件事：

1) 在 HTML 属性周围使用转义引号，例如 <img src=\"someimage.png\" />

2) 转义 HTML 结束标记中的正斜杠。 <div>Hello World!<\/div>. 这是一个古老的 HTML 规范的古老神器，不希望 HTML 解析器在将字符串放入 <SCRIPT> 标签。出于某种原因，今天的浏览器仍然喜欢它。

3) 这个很奇怪。您应该在标签名称和自闭合标签上的斜线。我不知道为什么这是，但在大多数现代浏览器上，如果您尝试使用 javascript 附加 <li> 标记作为格式化的无序列表的子级像这样：<ul/>，它不会工作。它在 ul 之后被添加到 DOM 标签。但是，如果代码如下所示：<ul />（注意空格 /）之前，一切正常。确实很奇怪。

4) 确保对可能包含在（坏的）HTML 内容。这是唯一能真正打破 JSON 通过意外提前终止字符串。任何" 字符如果要包含为 HTML，则应编码为 &quot; 内容。

via

【讨论】：

很好的答案！它应该是被选中的。

【解决方案6】：

您也应该转义正斜杠，这是正确的 JSON：

[{
"id": "services.html",
"img": "img/SolutionInnerbananer.jpg",
"html": "<h2class=\"fg-white\">AboutUs<\/h2><pclass=\"fg-white\">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology <\/p>"
}]

【讨论】：

【解决方案7】：

一种方法是将 HTML 中的双引号替换为单引号，但使用双引号已成为 HTML 中属性值的标准约定。

更好的选择是将json中的双引号和其他需要转义的字符转义。

您可以在此处获取有关转义的更多详细信息：Where can I find a list of escape characters required for my JSON ajax return type?

【讨论】：

没有“标准 HTML 格式”会通过使用单引号来“违反”。 HTML 中的单引号 完全有效 HTML！
你说得对，我是从约定的角度来看的。绝大多数人更喜欢对 HTML 属性值使用双引号。我已经更新了我的答案以反映这一点。
当作为 json 字符串返回时，我在 html 中成功使用了单引号。它也将验证为有效的 json。

【解决方案8】：

在将 html 添加到 JSON 之前使用 Base64 算法对 html 进行编码，并在阅读时使用 Base64 对 html 进行解码。

byte[] utf8 = htmlMessage.getBytes("UTF8");
htmlMessage= new String(new Base64().encode(utf8));


byte[] dec = new Base64().decode(htmlMessage.getBytes());
htmlMessage = new String(dec , "UTF8");

【讨论】：

【解决方案9】：

您可以将标识符作为查询选择器的参数。对于 PHP 和兼容语言，使用关联数组（实际上是对象），然后使用 json_encode。

$temp=array('#id'  =>array('href'=>'services.html')
           ,'img'  =>array('src'=>"img/SolutionInnerbananer.jpg")
           ,'.html'=>'<h2 class="fg-white">AboutUs</h2><p class="fg-white">...</p>'
           );
echo json_encode($temp);

但是没有一些 JS，HTML 不会为你做这件事。

{"#id":{"href":"services.html"},"img":{"src":"img\/SolutionInnerbananer.jpg"}
 ,".html":"<h2 class=\"fg-white\">AboutUs<\/h2><p class=\"fg-white\">...<\/p>"}

【讨论】：

【解决方案10】：

最简单的方法是将 HTML 放在单引号内。而修改后的json对象如下：

[
    {
        "id": "services.html",
        "img": "img/SolutionInnerbananer.jpg",
        "html": '<h2 class="fg-white">AboutUs</h2><p class="fg-white">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>'
    }
];

Fiddle.

最好的方法是转义双引号和其他需要转义的字符。修改后的json对象如下：

[
    {
        "id": "services.html",
        "img": "img/SolutionInnerbananer.jpg",
        "html": "<h2 class=\"fg-white\">AboutUs</h2><p class=\"fg-white\">developing and supporting complex IT solutions.Touchingmillions of lives world wide by bringing in innovative technology </p>"
    }
];

Fiddle.

【讨论】：

如果你想要有效的 json 对象，用单引号括起来是行不通的。

【解决方案11】：

可以用 JSON 编写 HTML 字符串。你只需要转义你的双引号。

[
    {
        "id": "services.html",
        "img": "img/SolutionInnerbananer.jpg",
        "html": "<h2class=\"fg-white\">AboutUs</h2><pclass=\"fg-white\">CSMTechnologiesisapioneerinprovidingconsulting,
        developingandsupportingcomplexITsolutions.Touchingmillionsoflivesworldwidebybringingininnovativetechnology,
        CSMforayedintotheuntappedmarketslikee-GovernanceinIndiaandAfricancontinent.</p>"
    }
]

【讨论】：

我已将代码更改如下，但它仍然在 JSONLint 验证器中显示验证错误 [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", " html": "
关于我们

我们是提供咨询、开发和支持复杂 IT 解决方案的先驱" } ]
单引号呢？

【解决方案12】：

您应该通过添加“\”来转义html字符串中的双引号等字符

例如：<h2 class=\"fg-white\">

【讨论】：

我已将代码更改如下，但它仍然在 JSONLint 验证器中显示验证错误 [ { "id": "services.html", "img": "img/SolutionInnerbananer.jpg", " html": "
关于我们

我们是提供咨询、开发和支持复杂 IT 解决方案的先驱" } ]
你确定？我刚刚在这里检查过：jsonlint.com 并说它是“有效的 JSON”
是的。这是一个有效的 JOSN。非常感谢

【解决方案13】：

只要正确转义 HTML，就可以了。 This page 显示需要做什么。

如果使用 PHP，你可以使用json_encode()

希望这会有所帮助:)

【讨论】：

如果你回显'"'内容将被PHP自动转义。
json_encode 有效：- $design=file_get_contents('test.html'); $design=json_encode($design); $json = '{"message":{"html": '.$design.'}}';

关于我们

关于我们