最小示例:预期的行为由Jasmin测试指定:
$(document).ready(function() {
  function thereIsImportantContent(id) {
    return $(id).find("strong").filter(function() {
      var index = $(id).text().indexOf($(this).text());
      return 0 <= index && index <= 20;
    }).length > 0;
  }
  // specs code
  describe("thereIsImportantContent", function() {
    it("accept strong near head", function() {
      expect(thereIsImportantContent($("#test_case_1")[0])).toBeTruthy();
    });
    it("accept strong near head with children", function() {
      expect(thereIsImportantContent($("#test_case_2")[0])).toBeTruthy();
    });
    it("accept wrapped strong near head", function() {
      expect(thereIsImportantContent($("#test_case_3")[0])).toBeTruthy();
    });
    it("reject strong further down", function() {
      expect(thereIsImportantContent($("#test_case_4")[0])).toBeFalsy();
    });
    it("reject strong further down with copies near head", function() {
      expect(thereIsImportantContent($("#test_case_5")[0])).toBeFalsy();
    });
  });
  // load jasmine htmlReporter
  (function() {
    var env = jasmine.getEnv();
    env.addReporter(new jasmine.HtmlReporter());
    env.execute();
  }());
});container {
  display: none;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.css">
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/1.3.1/jasmine-html.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container id="test_case_1">
  <!-- strong content at the beginning -> accept -->
  <p>Some <strong>content</strong></p>
  ...
  <p>other text</p>
  ...
  <p>Hey look: <strong>content</strong>!</p>
</container>
<container id="test_case_2">
  <!-- handle strong with children correctly -->
  <strong>Hey look: <span> content!</span></strong>
</container>
<container id="test_case_3">
  <p>Test</p>
  <p>Hey <strong>content!</strong></p>
</container>
<container id="test_case_4">
  <p>Something</p>
  ...
  <p>other text</p>
  ...
  <!-- strong content but located further down -> reject -->
  <p>Hey look: <strong>content</strong>!</p>
</container>
<container id="test_case_5">
  <!-- same text as in strong below triggering false accept -->
  <p>Some content</p>
  ...
  <p>other text</p>
  ...
  <!-- strong content but located further down -> should eject -->
  <p>Hey look: <strong>content</strong>!</p>
</container>
我的用例:作为用户脚本的一部分,尝试查找网站的潜在标题:
假设我有一个网站,如下所示:
<container>
  <p>Some <strong>content</strong></p>
  ...
  <p>other text</p>
  ...
  <p>Hey look: <strong>content</strong>!</p>
</container>我正在寻找一种方法,找到重要的外观元素,如(例如,h1,h2,strong,...)它们在视觉上接近可见文本的开头。
上面的代码在用户看来是这样的:
content
..。
其他文本
..。
嘿,看:content!
我目前的方法是评估container.text().indexOf(elementOfIntrest.text()),并且只使用指数较低的那些……
container.find("strong").slice(0,10).filter(function () {
    var index = container.text().indexOf($(this).text());
    console.log("Testing: " + $(this).text(), " index: " + index);
    return 0 <= index && index <= 50
});但我意识到,只有当重要的内容没有出现在早期的普通文本中时,这种方法才有效。
例如:
<container>
   <p>Some content</p>  <---position where the text "content" was found and
                             ^                             wrongly accepted       
   ...                       |Potentially important  
   <p>really long text</p>   |Element with text "content"
   ...                       |should be ignored as its far away
                             |from the start of the text
   <p>Hey look: <strong>content</strong>!</p>
</container>indexOf从第二行的强元素中找到"content“并接受它。
HTML :如何根据它们到给定祖先元素开头的距离(以字符计数)来有效过滤元素?
https://stackoverflow.com/questions/50629391
复制相似问题