如何检查 jquery .html() 变量和 ruby on rails 生成的 html 之间的相等性？答案

【问题标题】：How do you check for equality between a jquery .html() variable and ruby on rails generated html?如何检查 jquery .html() 变量和 ruby on rails 生成的 html 之间的相等性？
【发布时间】：2012-05-16 11:58:22
【问题描述】：

目前我正在尝试比较两个变量，newhtml 和 oldhtml。我使用以下方式获取旧 html：

var oldhtml = $('#pop').html();

我使用以下方法获取新的 html：

var newhtml = ("<%= escape_javascript render(:file => 'shared/_content') %>");

然后我尝试使用以下方法比较它们：

if(newhtml == oldhtml)
{
  //is never called
  $('#pop').hide();
}
else
{
  //is always called
  $('#pop').html(newhtml);
}

但它不起作用。在这种情况下，oldhtml 变量实际上只是之前的newhtml 变量。因此，如果您单击主页上的相同内容，newhtml 实际上应该只是 ruby on rails 生成的oldhtml 版本（<div id="pop"> 中存在的 html）。我尝试将它们附加以查看差异所在，但对我来说它看起来完全一样。我希望有人能把我推向正确的方向吗？谢谢！

【问题讨论】：

var newhtml = ... 行是如何工作的？它是获取实时内容（ajax 方式）还是在提供页面时确定的一次性字符串？
我不确定我是否完全理解您的问题，但我不相信它是实时内容。它正在访问可以使用 ajax 实时添加的内容，但在获取 html 的那一刻，所有内容都已经在数据库中。

标签： javascript jquery html ruby-on-rails ajax

【解决方案1】：

剥离两个html的标签，然后与==进行比较

`var StrippedString = OriginalString.replace(/(]+)>)/ig,"");

【讨论】：

【解决方案2】：

这一切都非常有帮助，我实际上将答案组合在一起以获得有效的东西。最终的工作是这样的：

像以前一样获取旧的html：

var oldhtml = $('#pop').html();

然后将新的html插入到div中：

$('#pop').html("<%= escape_javascript render(:file => 'shared/_content') %>");

然后，从 div 中获取 newhtml，就像我检索 oldhtml 一样：

var newhtml = $('#pop').html();

if 语句随后起作用，但您要确保将 div 更改为无法从数据库中检索到的任意值：

if(newhtml == oldhtml)
{
$('#pop').html("<h>toggled_off</h>");
$('#pop').hide();
}
else
{
$('#pop').html(newhtml);
}

【讨论】：

【解决方案3】：

我会尝试将 newhtml 放在一个隐藏的 DOM 元素中，然后从 jquery .html() 获取该内容

$('#HiddenDOM').html(newhtml);

if ($('#HiddenDOM').html() === $('#pop').html()) { ... }

未经测试，但可能会消除 html 呈现问题。

另外，对 javascript 使用三等式比较：=== 而不是 ==。请参阅 youtube 上关于 Javascript The Good Parts 的 Cockford 以获得解释。

总体而言，我会重新考虑您的设计，因为这种比较可能无法真正实现，并且会使您的架构面临各种浏览器谜团。有时，您首先必须找出什么不起作用才能找到有效的解决方案。

【讨论】：

【解决方案4】：

jQuery 文档警告说，.html()“某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML”。这也适用于动态插入的 HTML。

最好的办法是比较两个 javascript 字符串，这两个字符串都不是从 DOM 中读回的。

例如：

var newhtml = ("<%= escape_javascript render(:file => 'shared/_content') %>"),
    oldhtml = newhtml;

...

if(newhtml == oldhtml)
{
  $('#pop').hide();
}
else
{
  oldhtml = newhtml;
  $('#pop').html(newhtml);
}

这无疑比这更复杂，但我相信你明白了。

【讨论】：

【解决方案5】：

我不记得关于html() 返回的 html 格式的任何保证，尤其是 whitepace。

但是，至少当我在 Firefox 中从页面中提取一大段 HTML 时，输出的格式似乎与服务器发送的格式相同。

因此，字符串之间可能只有微不足道的区别，例如在前导和尾随空格中。尝试使用函数行 this 来比较两个 HTML sn-ps：

function compare_html(a,b) {
    a = a.replace(/^\s+/,"").replace(/\s+$/,"");
    b = b.replace(/^\s+/,"").replace(/\s+$/,"");
    return a == b;
}

【讨论】：