将HTML文本转换为jQuery对象

Question

将HTML文本转换为jQuery对象

3

我需要将文本转换为HTML jQuery对象，以便我可以访问在<input>中指定的值，以下是示例：

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

对于 <div id="content"></div> 中的 h1 和 h2 标签，可能由于它们不是 vnotrene 标签，所以我不知道如何处理。

目前我的代码如下：

var htmlContent = $(htmlContent);

但是它不能正常工作。

感谢您的咨询。

- user3061527

可以使用PHP Simple HTML DOM解析器（http://simplehtmldom.sourceforge.net/）轻松完成。 - srinath madusanka

$('title') 将获取标题标签... - Jamie Barker

看起来像是一个 XY 问题。除非你正在处理的是页面本身，否则为什么需要将整个页面的 HTML 存储在 jQuery 对象中？请告诉我们你想要做什么，也许有更简单的方法来实现你的需求。 - Banana

4个回答

1

你的代码看起来没问题，这是使用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"

参考文献：

- Andras P

0

$(htmlContent) 会给你以下内容

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

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

- mahip_j

0

试试这个方法。

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

- Abhijeet

我想提醒大家，这种方法有点不可预测和危险。标题（surprisely）的工作是正确的，但是 $(htmlContent).filter('head').text() 返回了错误的值。而且你只能获取 <title> 的内容，无法获取 <body> 的内容。你不应该信任这种方法。 - Rost

没有冒犯之意，我只是不确定这个解决方案是否稳定且跨浏览器。 - Rost

不幸的是，它返回给我一个空字符串。它不能按照我需要的方式工作（使用Chrome浏览器）。 - user3061527

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rost · Accepted Answer

我建议如下：

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