【问题标题】:Decode html in json用json解码html
【发布时间】:2015-07-07 16:34:50
【问题描述】:

我在 json 中有 html,它已经被(通过 c#)编码为:

{"itemID":6,"GlossaryWord":"ante","GlossaryDescription":"\u003cp\u003e\r\n\t\u003cstrong\u003eUp the ante\u0026nbsp;\u003c/strong\u003e\u003c/p\u003e\r\n\u003cul\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eHere\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eis\u0026nbsp;\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cb\u003esomething\u003c/b\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n","CategoryID":6}

但是我将如何解码 JavaScript/AngularJS 中的 GlossaryDescription 以便它显示像 <p><strong> 等的 html 标签?一如既往的感谢:)

【问题讨论】:

  • 没有什么特别的事情要做:jsfiddle.net/7cwowxr7。该字符串包含 HTML,您可以随意使用它(\uxxxx 转义序列已被 JSON 解析器“解码”)。
  • 您使用什么代码从 JSON 中获取 HTML 并将其添加到页面中?
  • AngularJS,我循环通过 json 并创建:跨度>

标签: javascript c# html json angularjs


【解决方案1】:

你不需要做任何事情。字符串"\u003cp\u003e"(例如)实际上并没有以需要解码的方式进行编码——它完全等同于"<p>"。如果您在控制台中输入"\u003cp\u003e" == "<p>",您会看到它返回true。由于“编码”字符串与非“编码”字符串完全相同,因此您可以以完全相同的方式使用它们。看看:

var obj = {"itemID":6,"GlossaryWord":"ante","GlossaryDescription":"\u003cp\u003e\r\n\t\u003cstrong\u003eUp the ante\u0026nbsp;\u003c/strong\u003e\u003c/p\u003e\r\n\u003cul\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eHere\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cstrong\u003eis\u0026nbsp;\u003c/strong\u003e\u003c/li\u003e\r\n\t\u003cli\u003e\r\n\t\t\u003cb\u003esomething\u003c/b\u003e\u003c/li\u003e\r\n\u003c/ul\u003e\r\n","CategoryID":6};

document.write(obj.GlossaryDescription);

【讨论】:

  • 好的,事情是我在另一个 javacript 插件(tooltipster)上使用这个数据并将整个内容输出为文本 - 不像上面但你可以看到 paragrpah 标签和 UL 等。所以我想我在将其提供给插件之前需要对其进行转换吗?谢谢P
  • 这听起来像是工具提示器转义 HTML 标记的问题。浏览 tooltipster 文档,contentAsHTML 选项似乎是相关的:“如果工具提示的内容以字符串形式提供,则默认情况下显示为纯文本。如果此内容实际上应解释为 HTML,请设置此内容选项为真。” iamceege.github.io/tooltipster/#options
  • yip,已经有 contentAsHTML,它适用于普通的硬编码 html,但不喜欢这个 json 版本。我实际上在 angularJS 中构建了工具提示输出,所以想知道是否有一些东西我可以围绕这个描述标签将其更改为正常的“技巧”工具提示器 - 感谢您的帮助:)
  • Something 正在转义 HTML,它与 JSON 无关(如运行我的 sn-p 所见)。也许 Angular 正在逃避它。没有看到你的实际代码是不可能的。
  • hmm,我在 Angular 中循环遍历 json 并用新的替换前端 html 即: var replace = " " + data[i].GlossaryWord.trim().toLowerCase() + ", ";所以必须有一些东西转义它,因为编码的 html 自然没问题?
【解决方案2】:

试试:

var htmlToUse = "<a class=\"gobig tooltip\" "
    + "title=\""
    + data[i].GlossaryDescription
    + "\">"
    + data[i].GlossaryWord.trim().toLowerCase()
    + ",</a>";
$('#HtmlParentContainer').html(htmlToUse);

正如Jordan 所指出的,您不需要更改字段的内容。您需要做的就是使用 JavaScript(和 jQuery)将现有的 HTML 替换为您生成的新 HTML。如果你不想使用 JavaScript 的 innerHTML,那么你可以使用 jQuery 的 html()

JSFiddle

注意:如果您将GlossaryDescription 字段应用于title 之类的元素属性,则其中不应包含HTML。此外,上面的代码就像 data 是一个数组一样,但您的示例不是。结果,JSFiddle 丢弃了[i]

【讨论】:

  • 谢谢,试过 decodeURI 还是一样。也不能使用来自 jquery 的 .html 并且内容还不是来自/进入 DOM。只是想知道是否有一个标准函数可以将该代码转换为正常
  • 我想念你的代码。它没有以需要解码的方式编码。我已经更新了我的答案。
  • 谢谢,你的权利 - 是别的东西,但我不需要解码 :)
  • @Cerls 如果我们已经回答了您的问题,请接受其中一个答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-01-23
  • 2015-12-29
  • 2016-06-18
  • 2021-06-05
  • 2018-05-05
  • 2012-08-18
相关资源
最近更新 更多