在 JavaScript 中使用 xpath 恢复 DOM 范围

Question

我试图掌握保存（序列化）和恢复（反序列化）DOM 选择或范围的最佳方法。这里有一篇关于字符串化范围对象的文章，但坦率地说它并没有真正起作用。

该情境是一本使用 Adob​​e Air Webkit 视图的交互式教科书。我有静态（内置）html 内容，用户可以突出显示并添加书签（注释）。这个机制一切正常，但我需要能够存储和恢复这些注释。我宁愿不存储 DOM 的修改版本，而是使用静态版本，然后重新应用我存储在 SQLite DB 中的用户注释以及其他所需的元数据。 DOM 操作对我来说是相当新的，到目前为止，我序列化 DOM::range 的尝试都失败了。但我意识到，我似乎只需要开始和结束容器以及开始和结束偏移量。然后我可以使用 document.createRange() 重新创建范围。

我可以使用的指导是序列化开始和结束容器的最佳方法。我的第一个想法是 xpath，但到目前为止我的尝试还不够。查看 DOM::Range 的 Mozilla 文档似乎非常简单，但创建可靠的 xpath 来恢复范围对我来说不太合适。

Answer 1

HTML

<div>
    <div id="container" style="background-color: red;">
        <p id="paraText">Text</p>
    </div>
</div>

---

JavaScript

function serialize(node) {
    if (typeof XMLSerializer != "undefined") {  // Firefox, etc.
        return (new XMLSerializer()).serializeToString(node);
    }
    else if (node.xml) {  // IE
        return node.xml;
    }
};

function parseXMLString(xml) {
    if (typeof DOMParser != "undefined") {  // Firefox, etc.
       var dp = new DOMParser();
       return dp.parseFromString(xml, "application/xml");
    }
    else if (typeof ActiveXObject != "undefined") {  // IE
        var doc = XML.newDocument();
        doc.loadXML(xml);
        return doc;
    }
};

var contextNode = document.getElementById('container');
var xmlString = serialize(contextNode);
var doc = parseXMLString(xmlString);

// Get elements from document using XPath
var xpathResult = doc.evaluate('//.', doc.firstChild, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

// Insert elements back into document (I used replace in order to show that the document is actually changed)
contextNode.parentNode.replaceChild(xpathResult.singleNodeValue.firstChild, contextNode);

Answer 2

碰巧，我已经为我的 Rangy 库编写了一个解决方案。 序列化器模块使用类似 XPath 的语法来序列化和反序列化范围和选择 (< a href="http://rangy.googlecode.com/svn/trunk/demos/serializer.html" rel="nofollow">演示）。

我还编写了一个尚未公开发布的荧光笔模块。我会整理它并很快发布一个演示。

更新

荧光笔演示现已推出。经过更多测试后，它将在下一个版本的 Rangy 中发布。

Answer 3

Rangy 库的 Serialiazer 模块的一个主要问题是它不是跨浏览器一致的，例如存储的选择在一种浏览器上无法在不同系列的浏览器（Gecko 和 IE）上恢复