如何在两个特定元素之间选择内容

How to select the content between two specific elements?

本文关键字：元素 之间 选择 两个      更新时间：2023-09-26

我有两个常量元素：（总是存在的）

  • span.start

  • span.stop

这是我的HTML结构（模式）:

...=/* each tag|string|element can be in here */

...
<span class="start"> ... </span>
...   /* now I want to select every-text is in here */
<span class="stop"> /... </span>
...

注意：我只想选择文本内容（.text()）

以下是示例：

<div class="one">
    <a href="www.example.com">LinkName</a>
    there is sometimes a string
    <span class="start">what</span>              // --------------- beginning of range
    I
    <div>want</div>                              
    <span>to</span>
    <span class="stop">select</span>             // --------------- end of range
    <div class="two">
        there can be any element/string else
    </div>
</div>

我还想要这个输出：

what I want to select

我尝试过的：：

var content = $('body').html().split($('span.stop')[0].outerHTML)[0].trim().text();

但这仅仅取决于span.stop。换句话说，它只是选择顶部（前面、后面）span.stop上的所有文本。

这里是伪代码：

获取父元素子节点：从等于"开始"节点的节点：从每个下一个节点获取文本内容，直到到达"结束"节点

function getTextInbetween(startNode, stopNode) {
    if (startNode.parentElement != stopNode.parentElement) return;
    var elements = startNode.parentElement.childNodes;
    // Get Start-Position
    var startPos = -1;
    for (var i = 0; i < elements.length; ++i) {
        if (elements[i] == startNode) {
            startPos = i;
            break;
        }
    }
    //var startPos = [].indexOf.call(elements, startNode); // Short version of the loop
    // Get all the text from start to stop
    var text = "";
    for (var i = startPos; i < elements.length; ++i) {
        text += elements[i].textContent;
        if (elements[i] == stopNode) {
            break;
        }
    }
  
    // remove lines and spaces as HTML does
    text = text.trim();
    text = text.replace(/'s+/g, " ");
    return text;
}
var startNode = document.getElementsByClassName("start")[0];
var stopNode = document.getElementsByClassName("stop")[0];
var text = getTextInbetween(startNode, stopNode);
console.log(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
  <a href="www.example.com">LinkName</a>
  there is sometimes a string
  <span class="start">what</span>
  I
  <div>want</div>
  <span>to</span>
  <span class="stop">select</span>
  <div class="two">
    there can be any element/string else
  </div>
</div>

尝试使用.contents()、.map()、.prevAll()、.is()、$.trim()、.get()、Array.prototype.filter()

var text = $(".one").contents().map(function(i, el) {
  if ($(el).prevAll(".start").is("*") && !$(el).is(".stop, .stop ~ *"))
    return $.trim(el.textContent || el)
  else return null
}).get().filter(Boolean);
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="one">
  <a href="www.example.com">LinkName</a>
  there is sometimes a string
  <span class="start">what</span> // --------------- beginning of range I
  <div>want</div>
  <span>to</span>
  <span class="stop">select</span> // --------------- end of range
  <div class="two">
    there can be any element/string else
  </div>
</div>

包括.start和.stop元素的文本

var text = $(".one").contents().map(function(i, el) {
  if (($(el).is(".start, .start + *, .start ~ *:not(.stop + *)") 
       || $(el).prev(".start").is("*"))
      && !$(el).is(".stop ~ *") && el.nodeType !== 8)
    return $.trim(el.textContent || el)
  else return null
}).get().filter(Boolean);
console.log(text, text.join(" "))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="one">
  <a href="www.example.com">LinkName</a> there is sometimes a string
  <span class="start">what</span>
  <!--------------- beginning of range -->
  I
  <div>want</div>
  <span>to</span>
  <span class="stop">select</span> NOT THIS
  <!--------------- end of range -->
  <div class="two">
    there can be any element/string else
  </div>
</div>

尝试使用jquery next（）选择器访问同级，直到到达停止节点。你可以在这里阅读更多关于它的内容以及示例https://api.jquery.com/next/

相关文章：