首页 > 解决方案 > 有没有更简单的方法来根据文本抓取数据

问题描述

尝试从普通表中的元素中抓取数据,并非所有单元格都是必需的。该信息包含在单元格中,如下面提供的示例:

<TD class=padded vAlign=top width="10%">
   <SPAN class=bold>Record No:</SPAN>
   <BR>40597
</TD>

在此示例中,我尝试提取字段的值,即 40597。

到目前为止,我已经能够使用jQuery来查找每个 td 元素,如下所示:

function getHtmlDoc(data){
  var el = document.createElement('html');
  el.innerHTML = data;
  $.each($('.padded',el),function(index,item){
        if($(this).text().indexOf("Record No:")>=0){
          console.log(index + " " + $(this).text());
        }
  });
}

这返回

Record No:
              40597

我只想要最后一部分。

我可以添加删除文本 Record No: 的步骤,然后修剪空白以获得值。

有更好的解决方案吗?我必须使用上面显示的类似方法执行此方法的一些项目,并且每个页面上有许多条目。

标签: javascriptjquery

解决方案


虽然这并不完美,但当您在 ​​DOM中寻找简单的文本时,我更喜欢使用节点

这是一个普通的 javascript示例:

var oDiv = document.getElementsByClassName("padded")[0];
var lastText = "";
for (var i = 0; i < oDiv.childNodes.length; i++) {
    var curNode = oDiv.childNodes[i];
    if (curNode.nodeName === "#text") {
        lastText = curNode.nodeValue;
    }
}
console.log(lastText);
<TABLE>
  <TD class='padded' vAlign='top' width="10%">
     <SPAN class='bold'>Record No:</SPAN>
     <BR />40597
  </TD>
</TABLE>

没有节点但有一些技巧的 jQuery 风格

const node = $(".padded")
        .clone()    //clone the element
        .children() //select all the children
        .remove()   //remove all the children
        .end()  //again go back to selected element
        .text()
        .trim();
  
console.log(node);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<TABLE>
  <TD class='padded' vAlign='top' width="10%">
     <SPAN class='bold'>Record No:</SPAN>
     <BR />40597
  </TD>
</TABLE>

参考:使用 .text() 仅检索未嵌套在子标签中的文本


推荐阅读