javascript-如何使用jQuery find从整页HTML字符串中提取内容

我有一个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>&copy; 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字符串中提取内容

相关文章