如果满足其他标记条件，则从 HTML 范围中提取文本字符串

Question

我正在通过 java 脚本加载网页，目的是从该网站的 HTML 源代码中提取单个字符串值，以便在我的脚本中的其他地方使用。所以网站有多个行容器遵循这个基本格式：

<tr>

<td align="left">     
<span class="criteria1">      
<script>document.write("INFO I WANT");</script>INFO I WANT        
</span>
</td>

<td align="left"><a href="http://www.example.com/1234/" title="Directory Criteria 1234">1234</a>        
</td>

<td align="left">         
<div class="criteria2" data-value="100" title="1642"></div>       
</td>

<td align="left">   
<span class="criteria3" style="font-weight:bold; font-size:10px;">North</span> 
</td>

</tr>

该站点有许多我不感兴趣的行容器，以及一些我感兴趣的。因此，我想检查每个行容器以查看是否满足以下条件（它们在我上面示例）：

1. 必须有一个带有 class="criteria1" 的 span 元素
2. title= 属性值中的某处必须有一个带有“1234”的锚标记
3. 必须有一个 div 元素为 class="criteria2" AND data-value="100"
4. 在我的示例中看到的任何字段中都必须有另一个具有 class="criteria3" 和 "North" 的 span 元素

如果满足这些条件，我想提取“INFO I WANT”字符串，并将其保存到脚本中的变量中。我们可以从脚本标签内或从它出现在标签之后的位置拉取它...这是什么，这个特定 span 标签的 innerHTML 内容？

正如您从这一点收集到的，我是 javascript 的新手，所以如果其中任何内容愚蠢、容易和/或不清楚，我提前道歉。我已经进行了很多挖掘以试图弄清楚如何做到这一点，但是经过一天半的测试而几乎没有进展，我已经达到了某种临界点。显然，它需要一个循环来遍历每个容器，然后（我猜）使用 getElementsBy 方法来检查条件。

请原谅我缺乏正规培训/词汇，并提前感谢您的帮助。只是通过拖钓 StackOverflow，你们都已经在其他企业中帮助了我一个伟大的交易！请务必纠正上述术语的任何误用。知道表达这些想法的正确方式将极大地帮助我在未来的研究中找到我的问题的答案。

Answer 1

这不是一个完整的解决方案，但它应该让您走上正确的道路。将每个条件隔离到可以将行传递给的方法中。这样，您以后可以轻松更改标准。

// get all rows
var trs = document.getElementsByTagName('tr'),
  currentRow,
  i = 0;

for (; i < trs.length; i++) {
  currentRow = trs[i];

  if (hasClassCriteria1(currentRow)) {
    if (hasAnchorWithTitle(currentRow)) {
      if (hasDivWithCriteria2(currentRow)) {
        console.log('continue checks until you find what you want...');
      }
    }
  }
}



// There must be a span element with class="criteria1"
function hasClassCriteria1 (row) {
  var spans = row.getElementsByTagName('span'),
    i;

  // Do any of these spans have the class "criteria1"?
  for (i = 0; i < spans.length; i++) {
    matched = spans[i].classList.contains('criteria1');
    if (matched) {
      return true;
    }
  }
}

// There must be a an anchor tag with "1234" somewhere in the title= attribute value
function hasAnchorWithTitle (row) {
  var a = row.getElementsByTagName('a'),
    i;
  for (i = 0; i < a.length; i++) {
    if (/1234/.test(a[i].getAttribute('title'))) {
      return true;
    }
  }
}

// There must be a div element with class="criteria2" AND data-value="100"
function hasDivWithCriteria2 (row) {
  var divs = row.getElementsByTagName('div'),
    i;

  for (i = 0; i < divs.length; i++) {
    if (divs[i].classList.contains('criteria2')) {
      if (divs[i].getAttribute('data-value') == 100) {
        return true;
      }
    }
  }
}

使用 jQuery

​​>

如果你会使用 jQuery，选择器将非常简单和富有表现力。

// There must be a span element with class="criteria1"
tr = tr.has('span.criteria1');

// There must be a an anchor tag with "1234" somewhere in the title= attribute value
tr = tr.has('a[title*="1234"]');

// There must be a div element with class="criteria2" AND data-value="100"
tr = tr.has('div.criteria2[data-value="100"]');

// There must be another span element with class="criteria3" and "North" in whatever field you see it in my example
return $('span.criteria3', tr).html() === 'North';

您可以查看完整示例here。它会找到所有符合您条件的行，然后遍历它们，并以您正在寻找的值发出警报。

jQuery 是你的朋友。有大量文档和it's easy to get started。不要重新发明轮子，除非你只是想学习。