javascript-如何使用jQuery find从整页HTML字符串中提取内容
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何使用jQuery find从整页HTML字符串中提取内容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3809字，纯文字阅读大概需要6分钟。
内容图文
我有一个TypeScript方法,该方法旨在从传入的Ajax加载的HTML字符串(如果它是完整视图)中提取特定的局部视图元素.
即使字符串包含具有class =“ body-content”的元素,下面的行也将返回0长度：
$(html).find('.body-content')
功能：
// Extract a panel from a HTML string
// Allow for multiple child elements
private _extractPanel(html: string): JQuery
{
var $panel: JQuery;
// Test for full vs. partial view in html
if (/<html>/i.test(html))
{
// Full view: Match the content selector and extract its children
$panel = $(html).find('.body-content').first().children();
// *** THE LINE ABOVE GIVES ZERO MATCHES! ***
}
else
{
// Partial view: Simply return the entire partial view
$panel = $(html);
}
return $panel;
}
是因为根是HTML元素还是我错过的其他东西？ $(html)返回长度为63的对象,但是find不返回匹配项.
这是来自调试器的html参数值的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.7.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="/">jQuery Tardis</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a>
</li>
<li><a href="/Home/About">About</a>
</li>
<li><a href="/Home/Contact">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="/Account/Register" id="registerLink">Register</a>
</li>
<li><a href="/Account/Login" id="loginLink">Log in</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div id="testpanel" class="row">
<div class="AddinListView"> <a href="/">Home</a>
<h2>Tardis transition examples</h2>
<ul>
<li><a href="/Transition/Transition/1?transition=none" target="_self">No transition (hide/show)</a>
</li>
<li><a href="/Transition/Transition/1?transition=slide" target="_self">Slide out/in</a>
</li>
<li><a href="/Transition/Transition/1?transition=fade" target="_self">Fade out/in transtions</a>
</li>
</ul>
</div>
</div>
<hr />
</div>
<footer>
<p>© 2014 - My ASP.NET Application</p>
</footer>
</body>
</html>
后续行动：http://jsfiddle.net/TrueBlueAussie/7AvmW/2/
基于Jack的回答,我将上面的JSFiddle放在一起,以查看发生了什么.
结果：
基本上$(html)在包含无效子元素(例如HTML HEAD和BODY)的字符串上,这些元素由jQuery展开.我发现的效果当然是将BODY的第一层弄平,只是回到根元素上.
解：
最简单的解决方案是始终创建带有虚拟父元素的page元素以进行搜索.
例如
$html =$('<div>').html(html);
那么任何典型的搜索都会起作用：
$html.find('.selector');
解决方法:
当您使用jQuery(html)时,它将创建一个临时< div>然后将其.innerHTML属性设置为给定的HTML内容.然后,对.childNodes属性进行迭代以构建jQuery集.
该文档还指出：
When passing in complex HTML, some browsers may not generate a DOM that exactly replicates the HTML source provided … During this process, some browsers filter out certain elements such as
<html>,<title>, or<head>elements. As a result, the elements inserted may not be representative of the original string passed.
在Chrome浏览器(可能还有其他浏览器)上,当以这种方式加载整个页面时,临时< div>的.firstChild属性将变为是< body>的第一个子元素：
var d = document.createElement('div');
d.innerHTML = '<html><body><span>hi</span></body></html>';
console.log(d.firstChild); // <span>hi</span>
解
为了可靠地使用.find(),可以将页面加载到一个临时元素中,如下所示：
var $root = $('<div>', {html: html});
var $items = $root.find('.body-content');
如果您已经预先知道页面结构,则也可以使用.filter()：
var $items = $(html).filter('.body-content');
内容总结
以上是互联网集市为您收集整理的javascript-如何使用jQuery find从整页HTML字符串中提取内容全部内容，希望文章能够帮你解决javascript-如何使用jQuery find从整页HTML字符串中提取内容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。