Javascript 如何将css样式偏移到contenteditable元素中？

我有一个contenteditable元素，其中包含一些嵌套的跨距来提供样式。我需要找出在elemebt的任何给定偏移量下css类是什么。例如，我可能有这样的东西：

<div contenteditable>
     <span class"nothing">    </span>
     <span class="outer">my <span class="other">name</span> is </span><span class="name">Andrew</span>
</div>

现在，假设contenteditable区域可能更大，并且有许多嵌套的span元素。在任何给定的文本偏移量下，我都需要能够计算包含它的css类

例如，假设我需要偏移4处的css样式，这是

name

的

n

。我希望结果是：

outer other

一个等价的解决方案是，如果给定一个偏移量（比如

4

），我可以计算包装该位置的html元素（在本例中，它将是：

<span class="other">name</span>

名称

我正在使用jquery，但没有其他库。我如何轻松地计算它

---

---

编辑：我之前使用的是textarea，但那不起作用。我应该使用contenteditable div元素。

我建议插入一个临时的伪span，用Jquery抓取它，然后升序

父类

，将类列表推到数组上，直到碰到外部容器。当然，如果您只想要

currentStyle

，那么至少更容易

---

关于如何将虚拟跨距放入文本区域，如果您只有一个字符位置，请参见。如果您想在插入符号处插入，请参见。

您不能使用文本区域进行插入。文本区域内的任何内容都将被视为文本，而不是标记。您应该查看“contenteditable”元素。

你能强化你的例子吗？当你说计算包含它的css类时，你的意思是什么？计算每个css类的实例数？给出一个偏移量的例子，并将其应用到你当前的例子中，预期的输出是什么？@Jrod，添加了一个例子。希望现在更清楚。@Ohgodwhy，不多。I d我不想创建我自己的扫描仪，但我恐怕这是我目前为止最好的选择。谢谢你的回答，但我只有一个偏移量。我怎么知道在哪里放置虚拟跨度？我会在有机会的时候尝试一下。谢谢。最后，我开始尝试了。最后，我没有完全按照你的建议实施，但你的回答让我找到了我的答案最终解决方案。内容可编辑元素的结构是，每行有自己的div元素，然后是一系列（可能是嵌套的跨距）。我只是从行的div开始，沿着层次结构走，直到找到我需要的元素。一旦到了那里，我可以要求它的css类以及它的所有父级css类。@AndrewEisenberg太棒了！我以前写过这类东西，这不是什么了不起的壮举……我很高兴它成功了！你是对的。我应该使用contenteditable、 我改变了问题，所以我使用了contenteditable div元素。但是，我仍然不知道如何解决这个问题。

<span class="other">name</span>