Question

我正在尝试创建一个用户可以在浏览器中存储注释的应用程序。

要弄清楚用户在文档中创建注释的位置，我正在尝试存储xpath和所选文本的偏移量。

我一直在搜索，似乎有很多从xPath字符串中检索元素的例子，但不是从DOM元素中查找xPath的好例子。

这是我尝试过的：

//Find xPath and pass the object
var range_obj = {
  start: getXPathForElement(range.startContainer, range.startContainer.ownerDocument),
  end: getXPathForElement(range.endContainer, range.endContainer.ownerDocument),
  startOffset: range.startOffset,
  endOffset: range.endOffset
};

其中getXPathForElement如下所示：

function getXPathForElement(el, xml) {
  var xpath = '';
  var pos, tempitem2;

  while (el !== xml.documentElement) {
    pos = 0;
    tempitem2 = el;
    while (tempitem2) {
      if (tempitem2.nodeType === 1 && tempitem2.nodeName === el.nodeName) { // If it is ELEMENT_NODE of the same name
        pos += 1;
      }
      tempitem2 = tempitem2.previousSibling;
    }

    xpath = "*[name()='" + el.nodeName + "' and namespace-uri()='" + (el.namespaceURI === null ? '' : el.namespaceURI) + "'][" + pos + ']' + '/' + xpath;

    el = el.parentNode;
  }
  xpath = '/*' + "[name()='" + xml.documentElement.nodeName + "' and namespace-uri()='" + (el.namespaceURI === null ? '' : el.namespaceURI) + "']" + '/' + xpath;
  xpath = xpath.replace(/\/$/, '');
  return xpath;
}

并且这段代码给出了一个很长的奇怪的文字，如下所示:(我认为这不是一个正确的xPath）。

“/ [name（）='HTML'和namespace-uri（）='http://www.w3.org/1999/xhtml'] / [name（）='BODY'和namespace-uri（） ='http://www.w3.org/1999/xhtml'] [1] / [name（）='P'和namespace-uri（）='http://www.w3.org/1999/xhtml'] [1] / [name（）='SPAN'和namespace-uri（）='http://www.w3.org/1999/xhtml'] [4] / [name（）='SPAN'和namespace-uri（）='http://www.w3.org/1999/xhtml'] [2] / [name（）='＃text'和namespace-uri（）='undefined'] [0]“

但是在Chrome Inspect Element中，它提供了一些干净的字符串：

// * [@ ID = “TinyMCE的”] / P /跨度[2] /跨度[2] /强

任何人都可以帮我从文档中检索元素的xpath，然后在xpath中找到元素吗？

Answer 1

如果您能够使用Saxon-JS，那么您可以使用专门为此目的而设计的XPath 3.0函数fn：path（）。

如何获取元素的xPath，并从xPath

1 个答案: