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

Shafizadeh 发表于 Dev

沙菲扎迪

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

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。

编码器Pi

这是伪代码：

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。