给定提取的组合文本字符串中的偏移量，如何确定包含节点和偏移量？

发布于 2024-12-01 21:26:05 字数 584 浏览 0 评论 0原文

给定以下 HTML（仅是一个示例）：

<div id="container"><span>This is <strong>SOME</strong> great example, <span style="color: #f00">Fred!</span></span></div>

可以使用 jQuery 的 text() 函数提取文本：

var text = $('container').text();

现在，确定偏移量 的最简单、最快、最优雅的方法是什么？提取的文本中的 >10 是否对应于上例中 SOME 节点内文本节点的偏移量 2？另外，如何进行逆操作，即确定从 DOM 对象提取的文本中的偏移量 10 和偏移量 2？

原文

Given the following HTML (just an example):

<div id="container"><span>This is <strong>SOME</strong> great example, <span style="color: #f00">Fred!</span></span></div>

One can extract the text using e.g. jQuery's text() function:

var text = $('container').text();

Now, what would be the simplest, fastest, most elegant way to determine that the offset 10 in the extracted text corresponds to the offset 2 of the text node inside the <strong>SOME</strong> node in the example above? Also, how would one do the inverse, i.e. determining the offset 10in the extracted text from the <strong>DOM object and the offset 2?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看透却不说透 2024-12-08 21:26:05

这是一个开始。您可以使用 TreeWalker 获得一个非常优雅的解决方案。不过，您需要为 IE 实现 TreeWalker（假设您需要 IE 支持）。

function findOffset(node, initialOffset) {
  var offset = initialOffset;
  var walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);
  while(walker.nextNode()) {
    var text  = walker.currentNode.nodeValue;
    if (text.length > offset) {
      return { node: walker.currentNode.parentNode, offset: offset };
    }
    offset -= text.length;
  }
  return { node: node, offset: initialOffset };
}

演示

现在进行相反的操作...

Here is a start. You can use TreeWalker to get a pretty elegant solution. You need to implement TreeWalker for IE (assuming you need IE support) though.

function findOffset(node, initialOffset) {
  var offset = initialOffset;
  var walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);
  while(walker.nextNode()) {
    var text  = walker.currentNode.nodeValue;
    if (text.length > offset) {
      return { node: walker.currentNode.parentNode, offset: offset };
    }
    offset -= text.length;
  }
  return { node: node, offset: initialOffset };
}

demo

Now for the reverse...

回复收藏 0 原文

~没有更多了~