Question

我需要将文本转换为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);

但它无法正常工作。

感谢您的咨询。

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

Answer 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()，或者如果您还需要正文节点，则可以使用documentFragments或iframe，在这种情况下，可以使用<html>个节点没问题。

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

-> "test"

参考文献：

Answer 3

$(htmlContent)将为您提供以下

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

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

Answer 4

尝试这种方式。

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

将html文本转换为jquery对象

4 个答案: