如何获取父元素中元素的文本索引答案

【问题标题】：How to get the text index of an element within a parent如何获取父元素中元素的文本索引
【发布时间】：2013-06-11 17:48:26
【问题描述】：

假设我有以下 html：

<div>
     <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
     <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum <i>faucibus</i> dolor auctor.</p>
</div>

看到被埋葬的了吗？我想获取它相对于父<div> 的文本偏移量，包括所有 标签和空格，但不包括父<div>。在本例中，文本偏移量为 225-ish。

这可以用 javascript 实现吗？

编辑：好的，有一点背景。我将完整的 html 作为字符串保存在数据库中，因此我知道确切的内容。我还可以访问实际的 dom 元素。现在我需要将该 dom 元素与其文本偏移量相匹配。

【问题讨论】：

一切都可以用javascript实现
您可能会得到 something，但这些东西在多个浏览器中并不可靠。任何直接使用 HTML 的东西都是不一致的，因为浏览器不会在 HTML 中思考：它们将 HTML 转换为 DOM。特别是对于空格，当转换回 HTML 时，精确的输出会有所不同。
获取 div 对象，使用innerHTML 获取内容，使用indexOf('') 查找所需部分的索引（+3）
如果有多个标签内容相同会怎样？

标签： javascript html string text offset

【解决方案1】：

性能方面

我会推荐纯粹的方式。 JSPerf: See it by yourself

Pure Javascript

var div = document.getElementsByTagName('div')[0];
/* The index */
alert(div.innerHTML.lastIndexOf('<i>'));
/*The remaining HTML of the div*/
alert(div.innerHTML.substring(div.innerHTML.lastIndexOf('<i>'),div.innerHTML.length));

另类

document.getElemendById('myFirstItalicText');

jQuery

alert($('div').html().indexOf('<i>'));

Alternative

将id 或class 添加到您的 元素以轻松找到它们。

$('#myFirstItalicText').css('background-color','red');

【讨论】：

好的我考虑过使用indexOf()方法，但是我担心可能有多个标签，它们可能有相同的内容。
@TylerJohnson 然后只需创建一个值为 0 的临时变量，它将存储找到的最新索引，并在循环中确保新索引高于变量.
但是如果第 n 个元素都相同，我怎么知道它们是我想要的呢？
您可能想要获取indexOf('') 和indexOf() 之间的子字符串并检查内容是否是您想要的内容。否则，您可能需要向其中添加 ID 或类。
如果您使用id，那么我想您将完全无需查找索引。

【解决方案2】：

根据您的要求，我认为答案是否。

浏览器提供元素的 HTML 只是为了方便，而不是作为 DOM API 的替代品。可靠地检索和操作元素的唯一方法是通过 DOM。

您应该只将 HTML 视为 DOM 中元素的 元数据。

【讨论】：

在下面查看我的评论。我不想使用indexOf()，因为可能有多个匹配的标签具有相同的内容。
我认为这是您问题的根本问题。你真的不能在浏览器中使用这样的 HTML。