将 html 文本转换为 jquery 对象答案

【问题标题】：convert html text to jquery object将 html 文本转换为 jquery 对象
【发布时间】：2014-11-21 09:02:49
【问题描述】：

我需要将文本转换为 html jquery 对象，以便我可以访问以下示例中指定的值。

var htmlContent = '<!doctype><html><head><title>Lorem Ipsum</title>Other code</head><body><div id="content"><h1>Custom code</h1><h2>Highlight2</h2></div></body></html>';

我想修改，以便我可以在 jquery 中处理 HTML 内容

htmlContent.find('head title').text();

h1 和 h2 知道方法，可能是因为它们不是 <div id="content"></div> 中的 vnotrene 标签

目前我有以下代码：

var htmlContent = $(htmlContent);

但它不能正常工作。

感谢您的咨询。

【问题讨论】：

可以使用 PHP Simple HTML DOM Parser simplehtmldom.sourceforge.net轻松完成
$('title') 将抓取标题标签....
看起来像 XY 问题。为什么需要将整个页面的 html 存储在 jQuery 对象中，除非它是您正在处理的页面？请告诉我们您要做什么，也许有更简单的方法可以实现您的需求。

标签： jquery html

【解决方案1】：

接下来我会提议：

var htmlContent = '<!doctype><html><head><title>Lorem Ipsum</title>Other code</head><body>Custom code</body></html>';

// use temporary iframe
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.write(htmlContent);

// get <title> content; next should work in IE8 too
var titleText = iframe.contentDocument.querySelector('head title').innerHTML;
console.log(titleText);

// remove temporary iframe element
document.body.removeChild(iframe);

注意：我已将 .textContent 更改为 .innerHTML 以支持 IE8。

另一种方式，使用jQuery：

var iframe = $('<iframe>').appendTo('body');
iframe[0].contentDocument.write(htmlContent);
var titleText = $('head title', iframe[0].contentDocument).text();
console.log(titleText);
iframe.remove();

【讨论】：

它适用于标签标题，但如果我编辑它以便我想要关于 body 标签的信息，那么它就不再工作了。
这很奇怪...我在 FF 和 Chrome 中尝试了下一个代码，它可以工作：$('body', iframe[0].contentDocument).text();（嗯，实际上你应该从<head> 中删除Other code，它不应该存在）
这是html页面的全部内容，通过$.ajax函数获取。当我有$('body',iframe[0] .contentDocument).text(); 返回空字符串（谷歌浏览器）
你能创建一些 pastebin 或 codepen 来显示问题吗？或者只是调试您的 AJAX 响应内容 - 该 HTML 是否一切正常？
我的 ajax 代码：var $jOk = jQuery.noConflict(); $jOk.ajax({ url: url, dataType: 'html', async: true, success: function (text, status, request) { var iframe = $jOk('<iframe>').appendTo('body'); iframe[0].contentDocument.write(text); var titleText = $jOk('body', iframe[0].contentDocument).text(); console.log(titleText); iframe.remove(); } 但在控制台日志中是空字符串。 html是<!DOCTYPE>之后</html>之后的完整代码

【解决方案2】：

您的代码看起来不错，这是在 jQuery 中创建新元素的方式，例如：

var $a = $('<div id="main"><p><strong>hello</strong><p></div>');

$a.find('p strong').text();

-> "hello"

我认为问题出在 html/head 标签上，jQuery 会忽略它们，但我想你不需要整个 html 块：

$('<html><head><div></head></html>');

-> [<div></div>]

如果您要解析包含完整 html 的字符串，我建议使用 jQuery.parseHTML()，或者如果您也需要 body 节点，您可以使用 documentFragments 或 iframe，在这种情况下，<html> 节点没有问题.

var htmltext = "<html><div><p>test</p></div></hmtl>"
$('<div>').append($.parseHTML(htmltext)).find('p').text()

-> "test"

参考资料：

【讨论】：

【解决方案3】：

$(htmlContent)会给你关注

Object[title, <TextNode textContent="Other codeCustom code">]

现在您可以使用$(htmlContent)[0].text 获取标题值

【讨论】：

【解决方案4】：

试试这个方法。

$(htmlContent).filter('title').text()
$(htmlContent).filter('head').text()

【讨论】：

我想注意到这种方式有点出人意料和危险。标题（令人惊讶）工作正确，但 $(htmlContent).filter('head').text() 返回错误值。而且您无法获得<body> 的内容，只能获得<title>。你不应该相信这种方法
无意冒犯，我只是不确定这个解决方案是否稳定且跨浏览器
不幸的是，它返回给我一个空字符串。它不能按我的需要工作（使用浏览器 Chrome）