Question

我正在使用Chrome DevTools开发一个用于实时编辑的小工具，我有一个小按钮“保存”，它抓取HTML并将其发送到服务器以使用Ajax更新静态文件（.html）。确实很简单。

我的问题是我需要在将HTML代码发送到服务器之前对其进行过滤，我需要删除一些节点，并且我正在尝试使用jQuery实现这一点，如下所示：

// I grab all the HTML code
var html = $('<div>').append($('html').clone()).html();
// Now I need to remove some nodes using jQuery
$(html).find('#some-node').remove();
// Send the filtered HTML to server
$.post('url/to/server/blahblahblah');

我已经尝试过此Using jQuery to search a string of HTML但没有成功。我无法在克隆的HTML代码上使用jQuery。

有关如何做到这一点的想法吗？

Answer 1

DOM不是HTML字符串。使用jQuery，你可以进行DOM操作，而不是字符串操作。

你正在做的是

克隆文档（因为您无论如何都将其转换为HTML所必需），
出于某种原因将克隆的文档附加到新的div
将div的内容转换为HTML字符串
将该HTML转换回DOM节点$(html) （所以我们回到上面的第一点）
查找和删除这些节点中的元素
可能将html变量发布到服务器。

不幸的是，html字符串没有改变，因为你操纵了DOM节点，而不是字符串。

希望您可以在上面看到，您正在进行各种与您最终想要的内容无关的转换。

我不知道您是否需要这样做，但您只需要.clone()，然后.find().remove()，然后.html()

var result = $("html").clone(false);

result.find("#some-node").remove();

var html = result.html();

Answer 2

也许是这样的？

var html = $('html').clone();
html.find('#some-node').remove();

克隆HTML并使用jQuery删除一些节点

2 个答案: