Android用の「ハイライター」をWebViewで作成しています。次の関数を使用して、HTML で選択した範囲の XPath 式を取得しています。
/HTML[1]/本文[1]/部[1]/部[3]/部[1]/部[1]/テキスト()[5]
今、私はjavascriptでこの関数を使って上記のXPath式を評価しています
var resNode = document.evaluate('/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[5]',document,null,XPathResult.FIRST_ORDERED_NODE_TYPE ,null);
var startNode = resNode.singleNodeValue;
しかし、私はstartNode 'null'を取得しています。
しかし、興味深い点は次のとおりです。
この'/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]' XPath 式を同じ関数を使用して評価すると、適切なノード、つまり a 「分割」。
2 つの XPath の違いは、前の XPath には textNode が含まれ、後で div のみが含まれていることです。
しかし、同じことがデスクトップ ブラウザでも問題なく機能します。
編集された サンプル HTML
<html>
<head>
<script></script>
</head>
<body>
<div id="mainpage" class="highlighter-context">
<div> Some text here also....... </div>
<div> Some text here also.........</div>
<div>
<h1 class="heading"></h1>
<div class="left_side">
<ol></ol>
<h1></h1>
<div class="text_bio">
In human beings, height, colour of eyes, complexion, chin, etc. are
some recognisable features. A feature that can be recognised is known as
character or trait. Human beings reproduce through sexual reproduction. In this
process, two individuals one male and another female are involved. Male produces
male gamete or sperm and female produces female gamete or ovum. These gametes fuse
to form zygote which develops into a new young one which resembles to their parent.
During the process of sexual reproduction
</div>
</div>
<div class="righ_side">
Some text here also.........
</div>
<div class="clr">
Some text here also.......
</div>
</div>
</div>
</body>
</html>
XPath の取得:
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var xpJson = '{startXPath :"'+makeXPath(range.startContainer)+
'",startOffset:"'+range.startOffset+
'",endXPath:"'+makeXPath(range.endContainer)+
'",endOffset:"'+range.endOffset+'"}';
XPathを作成する関数:
function makeXPath(node, currentPath) {
currentPath = currentPath || '';
switch (node.nodeType) {
case 3:
case 4:return makeXPath(node.parentNode, 'text()[' + (document.evaluate('preceding-sibling::text()', node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']');
case 1:return makeXPath(node.parentNode, node.nodeName + '[' + (document.evaluate('preceding-sibling::' + node.nodeName, node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotLength + 1) + ']' + (currentPath ? '/' + currentPath : ''));
case 9:return '/' + currentPath;default:return '';
}
}
私は XML ではなく、webview で HTML を使用しています。
Rangy のシリアライズとデシリアライズを使用してみましたが、Rangy の「シリアライズ」は正しく機能しますが、「デシリアライズ」は機能しません。
何かアイデアはありますか？
アップデート
最終的に問題の根本原因を突き止めました (まだ解決策ではありません :( )
` android webview で正確に何が起こっているのか. -->> どういうわけか、android webview は読み込まれた HTML ページの DOM 構造を変更しています。DIV には TEXTNODES が含まれていませんが、DIV からテキストを選択しているときに、その DIV のすべての行に対して TEXTNODE を取得しています。たとえば、デスクトップ ブラウザの同じ HTML ページと同じテキスト選択の場合、webview から取得する XPath は、デスクトップ ブラウザで指定されたものとはまったく異なります。
XPath from Desktop Browser:
startXPath /HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[1]
startOffset: 184
endXPath: /HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[1]
endOffset: 342
Xpath from webview:
startXPath :/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[3]
startOffset:0
endXPath:/HTML[1]/BODY[1]/DIV[1]/DIV[3]/DIV[1]/DIV[1]/text()[4]
endOffset:151