在元素之前获取文本

Question

How could I get the text of the body that is before a specific element using Javascript/jQuery?如何使用 Javascript/jQuery 获取特定元素之前的正文文本？ What I want to achieve is finding out the position of an element respect of the body, for instance, if the body text is 100 characters long and the text before the node is 50, that node would be at 50%.我想要实现的是找出正文元素方面的 position，例如，如果正文文本长 100 个字符，节点之前的文本为 50，则该节点将位于 50%。 Getting body's length is easy, but getting the text before an element is not as trivial as I'd thought in first instance.获取 body 的长度很容易，但是获取元素之前的文本并不像我最初想象的那么简单。

EDIT:编辑：

To make it clear, I'll give an example:为了清楚起见，我举个例子：

<body>
   <p>
      ...some text <span>that could have sub-elements</span>
   </p>
   <p>
      ...some text
      <ul>
         <li>now with a list</li>
         <li>why not?</li>
      </ul>
   </p>
   <div>
      <p>...some text...</p>
      <div>
          <p>...some text...</p>
          <p id="this_is_the_element">what's there in the body before this element?</p>
          <p>...some text...</p>
          <p>...some text...</p>
      </div
   </div>
</body>

In this case, the specific node would be #this_is_the_element and what I would expect to get is something like:在这种情况下，特定节点将是#this_is_the_element ，我希望得到的是：

...some text that could have sub-elements 
...some text 
now with a list 
why not? 
...some text 
...some text

Answer 1

I can propose this function : 我可以提出这个功能：

function textUntil($element) {
    var T = '#~~~#';
    var $marquer = $('<span>'+T+'</span>');
    $marquer.insertBefore($element);
    var text = $(document.body).text().split(T)[0];
    $marquer.remove();
    return text;
}

The trick is to insert a unique marker and get the text until this marker. 诀窍是插入一个唯一的标记，并获得文本，直到这个标记。 Of course the inserted element is removed before the HTML is rendered. 当然，在呈现HTML之前会删除inserted元素。 It will work for any kind of body. 它适用于任何身体。

Demonstration (open the console) 演示（打开控制台）

EDIT : 编辑：

Demonstration with the HTML of your edit (open the console) 使用编辑的HTML进行演示（打开控制台）

Answer 2

Denys's answer will work most of the time, but it will not work correctly if the original text contains the same string of characters you chose to use for your marker. Denys 的答案在大多数情况下都有效，但如果原始文本包含您选择用于标记的相同字符串，它将无法正常工作。

I propose a different approach, using Ranges .我提出了一种不同的方法，使用Ranges 。 Ranges are supported on all major browsers, including IE 9.所有主流浏览器都支持范围，包括 IE 9。

Here is my solution:这是我的解决方案：

const rangeBefore = document.createRange()
rangeBefore.setStart(parent.firstChild, 0)
rangeBefore.setEndBefore(targetEl)

const textBeforeTarget = rangeBefore.toString()

And if you want all text after the element:如果你想要元素之后的所有文本：

const rangeAfter = document.createRange()
rangeAfter.setStartAfter(targetEl)
rangeAfter.setEndAfter(parent)

const textAfterTarget = rangeAfter.toString()

And here is my answer adapted to your question:这是我针对您的问题所做的回答：

 const parent = document.querySelector("#common-ancestor") const targetEl = document.querySelector("#target") const rangeBefore = document.createRange() rangeBefore.setStart(parent.firstChild, 0) rangeBefore.setEndBefore(targetEl) const textBeforeTarget = rangeBefore.toString() document.querySelector("#output").textContent = textBeforeTarget

 <div id="common-ancestor"> <p>...some text <span>that could have sub-elements</span> </p> <p>...some text <ul> <li>now with a list</li> <li>why not?</li> </ul> </p> <div> <p>...some text...</p> <div> <p>...some text...</p> <p id="target">what's there in the body before this element?</p> <p>...some text...</p> <p>...some text...</p> </div> </div> </div> <hr> Text before element:<br><pre id="output"></pre>

在元素之前获取文本

问题描述

2 个解决方案

解决方案1
5 已采纳 2012-11-14 10:11:18

解决方案2
0 2022-06-08 11:47:09

在元素之前获取文本

问题描述

2 个解决方案

解决方案1 5 已采纳 2012-11-14 10:11:18

解决方案2 0 2022-06-08 11:47:09

解决方案1
5 已采纳 2012-11-14 10:11:18

解决方案2
0 2022-06-08 11:47:09