如何使用 jquery 选择某些文本节点？

Posted 2023-03-05

【中文标题】如何使用 jquery 选择某些文本节点？

【英文标题】：How to select certain text nodes using jquery?

【发布时间】：2015-07-17 04:01:05

【问题描述】：

我正在尝试使用 ajax 从网站获取一些数据。

这是我使用 ajax POST 方法的代码：

$(data).find('.col-md-9 .panel:lt(5)').each(function () console.log($(this).find('.panel-body .sp-card td:eq(1) center ').text());

控制台：

麦克战争网络 IP：mc-wars.org 投票 - 服务器信息 网站

我只想得到第一行：Mc-Wars Network

请帮忙！

这是我正在抓取的 html 代码的图像。

这是抓取后的控制台图像。 （我只需要第一行。

这是我正在抓取的网站上的代码：

<div onclick="location.href='//www.serverpact.com/vote-20129 ';" class="panel panel-default sp-plane">
                        <div class="ribbon ribbon-small ribbon-blue">
                            <div class="banner">
                                <div style="font-size: 14px;text-align: center;" class="text">#1</div>
                            </div>
                        </div>
                        <div style="padding: 5px;" class="panel-body">
                            <table class="sp-card">
                                <tbody><tr>
                                    <td style="font-weight: bold;vertical-align: middle;"><center><i class="fa fa-thumbs-up"></i><br>8384<br><br>#1</center></td>
                                    <td style="font-weight: bold;vertical-align: middle;">
                                        <center>
                                        Mc-Wars Network<br>
                                        <b>IP: mc-wars.org<br>
                                        <a style="margin-top: 5px;" class="btn btn-primary btn-sm" href="//www.serverpact.com/vote-20129 ">Vote - Server info</a> 
                                        <a style="margin-top: 5px;" class="btn btn-success btn-sm" href="http://mc-wars.org">Website</a>
                                        </b></center>
                                    </td>
                                    <td  class="hidden-xs">
                                    <a href="http://mc-wars.org" target="_blank"><img style="margin-top: 7px;margin-bottom: 3px;border-radius: 4px;" src="http://www.serverpact.com/b/20129.gif"  class="img-responsive hidden-xs"></a>
                                        <span style="font-size: 13px;">
                                            McWars is a minecraft pvp based server where you will have to build a fortress for your team and destroy the other teams base to win. With more than 10 different classes to choose, youll love it.
                                        </span>            
                                    </td>
                                </tr>
                            </tbody></table>
                        </div>
                    </div>

【参考方案1】：

可能 text() 结合了所有子文本节点。

您需要的可能是将文本节点检索为 nodes 然后获取它们的内容。以See this post 为例。

【参考方案2】：

这是一个 sn-p，我将 td 中的 center 的子节点导航到正确的文本节点。请注意，空格会创建一个子节点，因此例如在 center 节点之前有一个纯空格文本节点（在这种情况下并不重要，但您应该注意这一点）。

document.write('here you go:' + $('#firstDiv td:nth-child(2) center')[0].childNodes[0].textContent)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="firstDiv">
        <table id="coolTable">
           <tbody>
           <tr>
              <td>
              </td>
              <td>
                    <center>
                       The text I need!
                    <br>
                    <b>
                    The text I dont need!
                    </b>
                    </center>
             </td>
            </tr>
            </tbody>
         </table>
    </div>

另请参阅：MDN: Whitespace in the DOM

【讨论】：

如何让我的 javascript 代码忽略空格？

你读过我链接的文章吗？它有一些实用功能可以做到这一点，比如first_child( par )

【参考方案3】：

有办法做到这一点：

$(data).find('#firstDiv #coolTable').each(function () 
console.log($.trim($(this).find('tbody tr td:eq(1) center').contents()[0].nodeValue)));

【讨论】：

当我用 .contents()[0].nodeValue 替换 .text() 函数时，出现此错误 = Uncaught TypeError: Cannot read property 'nodeValue' of undefined

您正在使用 find 方法查找类元素，而不是您在 html 结构中定义的 id 元素。仅在我已经对其进行测试以使其正常工作后，才将您的脚本替换为上述内容。

关于您向@ekusela 提出的问题，您可以使用 jQuery 方法 $.trim(' string_here ') 删除空格，正如我在回答中已经使用的那样。不要忘记投票是否有用。谢谢！

上面的代码只是我需要得到的一个例子。我把我的问题改成你能看到我真正需要的东西。请看一看。

【参考方案4】：

好的，您的问题发生了很大变化！ 在你的 .text() 末尾添加这将完成这项工作：

.match(/[^\n]+/g)[0]

请注意，可以通过更改索引来捕获所有行，其中“0”是第一行，“1”是第二行，依次为。

【讨论】：

不，我现在收到此错误。未捕获的类型错误：无法读取 null 的属性“0”（当我最后不使用 .match 时，它会获取所有文本）

能否请您发布代码和 HTML 结构，以便我可以在这里尝试任何东西？

尝试在 .text() 方法之后和 .match() 之前添加 .toString()。

添加 tostring 会产生同样的错误。请看一下我发布的图片。

@Infinity，你想从哪个节点开始寻找？这是第一个可重复的吗？