Question

我有一个<pre>块，其中包含由个元素包围的0个或更多个部分。我添加元素以响应用户触发的事件（使用javascript）。

我需要找到所有这些元素的位置，以便我可以在用户重新访问该页面时将其保存并恢复到<pre>中的同一文本块。

我不想简单地保存<pre>块的HTML内容，因为它可能非常大，而且效率不高。我宁愿在每个开始和结束的文本中保存位置的数字索引。

我可以使用vanilla javascript，或者我可以在此应用程序中使用jQuery。

以下是一个例子：

<pre id="test">Hello, <span>world</span></pre>

在这种情况下，我想将对[7,12]保存为字符串“Hello，world”中由span包围的子字符串的开头和结尾。

使用jQuery，这是我可能最终得到的代码类型的基本存根：

$("#test span").each(function(){
    // find the start and end indexes of $(this) within the parent element's text content, but how?
    // save these 2 digits etc
});

我也应该这样说：

除了pre元素

span

span元素永远不会重叠，永远不会为空（我有其他代码可以检查这些情况并根据需要删除/替换它们）
假设只有一个pre或我可以通过ID访问它，如上例所示

Answer 1

尝试这样的事情：

$("#test span").each(function(i,el){
    var parentText = $(el).parent().text();
    var spanText = $(el).text();
    var index1 = parentText.indexOf(spanText);
    var index2 = index1+spanText.length;
    alert('['+index1+','+index2+']');
});

修改：http://jsfiddle.net/m6eE2/

Answer 2

你可以遍历span元素：

var txt = $('#test').html();
var pos = -1;
var posList = new Array();
while (true) {
    pos = txt.indexOf("<span>", pos+1);
    if (pos < 0) {
        break;
    }
    var pos1 = pos;        
    pos = txt.indexOf("</span>", pos+1);
    if (pos < 0) {
        break;
    }
    var tuple = {start: pos1, end: pos};
    posList.push(tuple);
};
alert (JSON.stringify(posList));

Example at jsfiddle.net.

Answer 3

最后我很简单地解决了这个问题。关键是只为每个添加一个唯一的ID属性，然后使用indexOf()来查找的innerHTML中的<pre>（或{ jquery中的{1}} jquery .html()。

问题的其余部分很复杂，只需要在所讨论的标签之前使用与所有开始和结束.each()标签长度相等的正确偏移量。这会在非HTML文本字符串（jquery中为）中生成一个位置，然后我可以使用它来重新插入.text() s，我必须按相反顺序执行此操作（从文本字符串的结尾并开始工作）。这会将文本转换为HTML，因此我使用jquery的而不是<pre>替换了.html(new_version)的内容。

这在概念上类似于Andomar的答案，但他的答案并没有在纯文本中给出.text()的位置，只在HTML中。

以下是我的代码的精简版：

<span>

注意，在我的问题中，我要求开始和结束，而在我的回答中，我使用了开头和长度。

查找字符串中元素的偏移量

3 个答案: