CODEWITHSUNDEEP
javascripthtmlcssxmlxpath
Denis
Denis

Reputation: 1271

How to highlight fragments of XML specified by an XPath?

I need to display an XML document on the HTML page. User can select different predefined XPath expressions. And as a result, fragments of the XML document specified by the XPath expression must be highlighted.

The solution must be client-side (HTML, CSS, JavaScript). Are there existing frameworks with the described functionality? Or how could it be implemented?

XPath expressions are very simple. They has the following form: /elem1[1]/elem2[5]/elem3[2]

Just names of the elements followed by their position.

Maybe I can use existing JavaScript-based code editors or highlighters?

Upvotes: 0

Views: 1198

Answers (1)

Denis
Denis

Reputation: 1271

It's very simple. Here is an exmple.

Sample 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>

Sample CSS:

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

And the JavaScript code. Sample XML document:

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>`;

Some utility functions to generate GUIDs:

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 function gets XPath expression from the data-xpath attribute, finds nodes matched by the expression and inserts magic comments before and after matching nodes. Then the XML document is serialized as a string. And at last we replace magic comments by <span class="highlight">:

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>');
}

Attach event handlers to links and display the initial unhighlighted content of the XML document:

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;');
};

Upvotes: 1

Related Questions