javascript - 如何突出显示 XPath 指定的 XML 片段？

Question

我需要在 HTML 页面上显示一个 XML 文档。用户可以选择不同的预定义 XPath 表达式。因此，必须突出显示由 XPath 表达式指定的 XML 文档片段。

解决方案必须是客户端(HTML、CSS、JavaScript)。是否存在具有所描述功能的现有框架？或者如何实现？

XPath 表达式非常简单。它们具有以下形式:/elem1[1]/elem2[5]/elem3[2]

只是元素的名称后跟它们的位置。

也许我可以使用现有的基于 JavaScript 的代码编辑器或荧光笔？

Answer 1

非常简单。 Here is an exmple .

示例 HTML:

<p><a href="#" data-xpath="/bib/book[2]">2nd book</a></p>
<p><a href="#" data-xpath="/bib/book[3]/author[1]">1st author of the 3rd book</a></p>
<p><a href="#" data-xpath="/bib/book/author">All authors</a></p>
<div id="doc-content"></div>

示例 CSS:

#doc-content { white-space: pre; }
.highlight { color: red; }

还有 JavaScript 代码。示例 XML 文档:

var doc = `<bib xmlns="">
  <book>
    <title>TCP/IP Illustrated</title>
    <author>Stevens</author>
    <publisher>Addison-Wesley</publisher>
  </book>
  <book>
    <title>Advanced Programming in the Unix Environment</title>
    <author>Stevens</author>
    <publisher>Addison-Wesley</publisher>
  </book>
  <book>
    <title>Data on the Web</title>
    <author>Abiteboul</author>
    <author>Buneman</author>
    <author>Suciu</author>
  </book>
</bib>`;

生成 GUID 的一些实用函数:

function s4() {
  return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
function guid() {
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

Main函数从data-xpath属性中获取XPath表达式，找到与该表达式匹配的节点，并在匹配节点前后插入魔术注释。然后将 XML 文档序列化为字符串。最后，我们用 替换魔术注释:

var parser = new DOMParser();
var printer = new XMLSerializer();
function highlightXPath(e) {
  var xpath = e.target.dataset.xpath;
  var xml = parser.parseFromString(doc, 'text/xml');
  var nodes = xml.evaluate(xpath, xml, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  var id = guid();
  for (var i = 0; i < nodes.snapshotLength; i++) {
    var node = nodes.snapshotItem(i);
    node.parentNode.insertBefore(xml.createComment('start_' + (i+1) + '_' + id), node);
    node.parentNode.insertBefore(xml.createComment('end_' + (i+1) + '_' + id), node.nextSibling);
  }
  var str = printer.serializeToString(xml);
  var content = document.getElementById('doc-content');
  content.innerHTML = str.replace(/</g, '&lt;')
    .replace(/&lt;!--start_(\d+)_.*?-->/g, '<span id="highlight$1" class="highlight">')
    .replace(/&lt;!--end_.*?-->/g, '</span>');
}

将事件处理程序附加到链接并显示 XML 文档的初始未突出显示的内容:

window.onload = function () {
  var links = document.querySelectorAll('a[data-xpath]');
  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', highlightXPath);
  }
  var content = document.getElementById('doc-content');
  content.innerHTML = doc.replace(/</g, '&lt;');
};