jquery parseHTML 没有按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16289920/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery parseHTML not working as expected
提问by TARKUS
I'm getting json data back from a jsonp call. The data is coming back alright. One data element is in the form of a string with some html in it ("p" tag, "a" tag). I'm trying to output this element (a picture description) within a jQuery dialog box. For some reason I can't get it to render as html, whether I use $.parseHTML or not.
我正在从 jsonp 调用中获取 json 数据。数据恢复正常。一个数据元素是一个字符串的形式，其中包含一些 html（“p”标签，“a”标签）。我试图在 jQuery 对话框中输出这个元素（图片描述）。出于某种原因，无论是否使用 $.parseHTML，我都无法将其呈现为 html。
Code snippet:
代码片段：
var image = data.image;
var title = data.title;
var id = data.id;
var description = $.parseHTML( data.description );
var media = data.media;
var secret = data.secret;
if(media == "photo"){
var string = "<div id=\"picturebox\" class=\"picturebox\">\n";
string += " <img src=\""+image + "\" id=\"photo_"+id+"\" />\n";
string += " <h2>" + title + "</h2>\n";
string += " <p>" + description + "</p>\n";
string += "</div>\n";
$('#gbFullPic').html(string);
}
Although the dynamically produced div correctly displays, including the image and title, the "description" line outputs like this: [object Text]
虽然动态生成的 div 正确显示，包括图像和标题，但“描述”行输出如下：[object Text]
If I remove the $.parseHTML the output looks like this:
如果我删除 $.parseHTML 输出如下所示：
Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>
That would be alright of course, if my html output did not show the actual html tags. What am I doing wrong?
如果我的 html 输出没有显示实际的 html 标签，那当然没问题。我究竟做错了什么？
UPDATE (2nd revision): My previous solution was incomplete. The problem was more complicated than a single jquery or javascript solution.
更新（第二次修订）：我之前的解决方案不完整。这个问题比单个 jquery 或 javascript 解决方案更复杂。
The problem began on the server side, with badly formed html that was sent via
问题始于服务器端，通过发送的格式错误的 html
header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';
On the server side (PHP), I had to condition my "description" item, like so (note the addition of htmlspecialchars_decode and an addslashes wrapper):
if($k == "description"){ $data["$k"] = addslashes(htmlspecialchars_decode($v)); } else{ $data["$k"] = $v; }Then, this javascript properly rendered the json data item:
var description = data.description.replace('\','');
在服务器端 (PHP)，我必须调整我的“描述”项，就像这样（注意添加了 htmlspecialchars_decode 和 addlashes 包装器）：
if($k == "description"){ $data["$k"] = addslashes(htmlspecialchars_decode($v)); } else{ $data["$k"] = $v; }然后，这个 javascript 正确呈现了 json 数据项：
var description = data.description.replace('\','');
With that two-step process of correcting the delivery format on the server page, and stripping slashes using a .replace on the client side, the "description" properly displays all text and html elements on the html page.
通过更正服务器页面上的传递格式和在客户端使用 .replace 去除斜杠的两步过程，“描述”正确地显示了 html 页面上的所有文本和 html 元素。
回答by LouD
My guess is that your data.description is escaped and the method parseHTML isn't going to handle that. Check out this post for a solution:
我的猜测是你的 data.description 被转义了，方法 parseHTML 不会处理它。查看此帖子以获取解决方案：
Javascript decoding html entities
var text = '<p>name</p><p><span style="font-size:xx-small;">ajde</span></p><p><em>da</em></p>';
var decoded = $('<div/>').html(text).text();
alert(decoded);
So in your case:
所以在你的情况下：
var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);
回答by Mathijs Flietstra
Try var description = $($.parseHTML(data.description)).html();
尝试 var description = $($.parseHTML(data.description)).html();
jQuery's parseHTMLreturns an array of DOM nodes. You could then insert them into the DOM, but in your case you should get their .html()and add it to your string.
jQuery 的parseHTML返回一个 DOM 节点数组。然后您可以将它们插入到 DOM 中，但在您的情况下，您应该获取它们.html()并将其添加到您的字符串中。
