javascript - 如何捕获两个标签之间的字符串

Question

我正在编写一个小书签来改进我的工作流程。我的部分工作是获取要放入电子邮件中的正确信息。我喜欢 JavaScript 和 jQuery，所以我正在研究如何使用这个库来简化我的工作。

我的目标是一个标记特别奇怪的网站。我需要在匹配的标签之后和下一个标签之前捕获文本。奇怪的是，这一切都在 P 标签内。我也不知道网站开发人员为什么决定使用标签标签……我无法修改标记，所以这不是一个选项。我在整个网络上进行了搜索，但未能找到适合我的具体情况的工作技术。

我创建了一个 jsFiddle 来演示我正在尝试使用相同类型的标记和 CSS 做什么。我在访问标签时没有问题，并且我使用了几种不同的方法来做到这一点(在 fiddle 中，注释掉了)但我仍然无法正确地“捕获”两个标签之间的文本。文本最终将被放入警报中，因此我可以快速复制它。我试过使用 .nextUntil 但没有成功。

基本上是这样的:

<label>item 1</label> Content to capture
<br><br>
<label>item 2</label> Don't capture this...

我担心我的尝试不起作用的原因是(我认为)nextUntil() 尝试使用初始选择器查找下一个对象，因此它正在寻找下一个标签，而不是之间的文字。我试过使用 $('selector').parent().nextUntil('label') 也没有用。

---

这是工作示例:

$(document).ready(function(){
  //$('p label:eq(0)')afterUntil('<br>').css('color', 'red');
  //$('p').find($('label:contains("item 1")')).nextUntil("<label>").css('color', 'red');
  $('p label:contains("item 1")').parent().nextUntil('label').css('color','red');
});

label {
  display:inline-block;    
  width:25%;
  font-weight:bold;
}
p {
  font-family:arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <label>item 1</label> Capture me!<br><br>
  <label>item 2</label> Don't capture me
</p>

( fiddle :http://jsfiddle.net/1c2LpzrL/1/ )

Answer 1

您可以只处理 <p> 中的 HTML标记为字符串，然后获取 substring在 </label> 之间第一个<br> :

var totalText = $("p").html();
//determine start-pos and end-pos of desired substring, and then get it
var startPos = totalText.indexOf("</label>") + "</label>".length;
var endPos = totalText.indexOf("<br");
var targetText = totalText.substring(startPos,endPos).trim();

( fiddle :http://jsfiddle.net/3uw8ux9t/3/ )

1. startPos找到第一个 "</label>" 的位置然后加上 "</label>" 的长度对此。
2. endPos找到第一个 "<br" 的位置(我省略了结尾 > 是因为它的正式拼写是 <br /> ，我的方式允许两种拼写方式)。

3. targetText最后从 startPos 中获取子串到 endPos .
   (.trim() 删除新字符串开头和结尾的所有空格)

   • console.log(targetText)给出:

     Capture me!

---

更新:

在您发表评论后，我重写了我的脚本以满足您的特定需求:

$(document).ready(function(){
  function getUnenclosedText(selector,pointer,tag) {
    var str = $(selector).html();
    //determine start-pos and end-pos
    var startPos = str.indexOf(pointer+"</"+tag+">") + (pointer+"</"+tag+">").length;
    var endPos = str.indexOf("<"+tag,startPos);
    //if there are line-breaks, reset end-pos
    if (str.indexOf("<br",startPos)<endPos || endPos==-1) {
      endPos = str.indexOf("<br",startPos);
    }
    //return substring
    if (endPos==-1) {return str.substring(startPos).trim();} //if it was the last text in the container
    else {return str.substring(startPos,endPos).trim();}
  }
  
  console.log(getUnenclosedText("p","item 1","label")); //(selector,pointer,pointerTag)
  alert('Item 1: '+getUnenclosedText("p","item 1","label") +'\n'+ 'Item 3: '+getUnenclosedText("p","item 3","label"));
});

p {
  font-family:arial;
}

label {
  display:inline-block;    
  width:25%;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <label>item 1</label> Capture me!
  <br /><br />
  <label>item 2</label> Don't capture me
  <label>item 3</label> capture me as well
  <br /><br />
  <label>item 4</label> Don't capture me either
</p>

( fiddle :http://jsfiddle.net/3uw8ux9t/9/ )

我试图让它尽可能地可扩展，对所有参数都使用变量，这样脚本就不会限于 <p>和 <label>不再。

• 您现在必须调用函数 getUnenclosedText(selector,pointer,tag) ，每次你想提取一段文字。这三个参数使该函数具有可扩展性，因此您可以在各种元素上使用它，而不仅仅是 <label>。在 <p> :
  • "selector"指定要对其执行功能的容器元素。所以如果你有多个 <p>例如，具有不同 ID 的标签，您可以访问特定的 <p>标记，使用其 jQuery 选择器(例如 "p#someid" )。
  • "pointer"指定要在哪段文本(例如 "item 1" 、 "item 2" )之后提取未包含的文本。
  • "tag"指定包含指针的标记类型(例如 "label" 、 "span" )。

如果您有任何问题，请在评论中提问，我会在需要时进行解答或更新此答案，但我认为您可以在互联网上找到您需要的大部分内容。
阅读this关于如何使用indexOf() ，您将理解代码中最困难的部分。