jquery parseHTML 未按预期工作

Posted

技术标签:

【中文标题】jquery parseHTML 未按预期工作【英文标题】:jquery parseHTML not working as expected 【发布时间】:2013-04-23 18:50:00 【问题描述】:

我正在从 jsonp 调用中获取 json 数据。数据恢复正常。一个数据元素是字符串形式,其中包含一些 html(“p”标签、“a”标签)。我试图在 jQuery 对话框中输出这个元素(图片描述)。出于某种原因,无论我是否使用 $.parseHTML,我都无法将其呈现为 html。

代码sn-p:

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);

虽然动态生成的 div 正确显示,包括图像和标题,但“描述”行输出如下: [对象文本]

如果我删除 $.parseHTML,输出如下所示:

Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>

如果我的 html 输出没有显示实际的 html 标签,那当然没问题。我做错了什么?

更新(第二版): 我之前的解决方案不完整。这个问题比单个 jquery 或 javascript 解决方案更复杂。

问题始于服务器端,发送的 html 格式不正确

header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';

在服务器端 (PHP),我必须像这样调整我的“描述”项(注意添加了 htmlspecialchars_decode 和 addlashes 包装器):

  if($k == "description") 
    $data["$k"] = addslashes(htmlspecialchars_decode($v));
  
  else
    $data["$k"] = $v;
  

然后,这个 javascript 正确地渲染了 json 数据项:

var description   = data.description.replace('\\','');

通过纠正服务器页面上的交付格式和在客户端使用 .replace 去除斜线的两步过程,“描述”可以正确显示 html 页面上的所有文本和 html 元素。

【问题讨论】:

【参考方案1】:

我的猜测是您的 data.description 已转义,而 parseHTML 方法无法处理。查看此帖子以获取解决方案:

Javascript decoding html entities

var text = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = $('<div/>').html(text).text();
alert(decoded);

所以在你的情况下:

var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);

【讨论】:

非常感谢。稍微摆弄了一下,我将您的原则应用于我的问题,现在它可以工作了。我将编辑我的问题以显示新代码。【参考方案2】:

试试var description = $($.parseHTML(data.description)).html();

jQuery 的 parseHTML 返回一个 DOM 节点数组。然后您可以将它们插入 DOM,但在您的情况下,您应该获取它们的 .html() 并将其添加到您的字符串中。

【讨论】:

感谢您的帮助,但使用它给了我:错误:TypeError:$.parseHTML(...).html is not a function 尝试使用 $.parseHtml() 时出现同样的“TypeError: jQuery.parseHtml is not a function” 会是什么? @user1954544 - $.parseHTML 应该是一个函数,如果 jQuery 加载正确,我刚才看到它时确实意识到我的答案包含错误,我忘记包装 parseHTML 输出在一个 jQuery 对象中(这是 TypeError: $.parseHTML(...).html is not a function 错误的来源,我刚刚在答案中修复了它。

以上是关于jquery parseHTML 未按预期工作的主要内容,如果未能解决你的问题,请参考以下文章

Javascript:Jquery 发布请求未按预期工作

jquery 中的 next() 函数未按预期工作

使用 jQuery 将值发布到 api 未按预期工作

Jquery UI Datepicker 日历未按预期工作

jQuery DataTables column.width 选项未按预期工作

动画未按预期工作[重复]