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

主な機能は、データ-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;'); 
};