Question

我有两个常量元素:(总是存在）

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上的所有文字。

Answer 1

这是伪代码：

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

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>

Answer 2

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

＆＃13;

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)

＆＃13;

<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>

＆＃13;

包括.start，.stop元素文字

＆＃13;

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(" "))

＆＃13;

<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>

＆＃13;

Answer 3

尝试使用jquery next（）选择器访问兄弟节点，直到到达停止节点。您可以在此处阅读更多相关内容以及示例 https://api.jquery.com/next/

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

3 个答案: