XPath 式の文字列リテラルでダブルクォートをエスケープするには？

Question

質問

• XPath 式でテキストノード値を指定してフィルタするには？(31198)｜teratail

上記質問に引き続き、任意の文字列値を持つテキストノードを得る関数を考えます。

<ul id="sample">
  <li>test</li>
  <li>"hoge"</li>
  <li>'foo'</li>
  <li>"piyo'</li>
</ul>
<script>
'use strict';
function getFirstTextNode (contextNode, string) {
  return document.evaluate('descendant::text()[.="' + String(string).replace(/"/g, '""') + '"]', contextNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

var ul = document.getElementById('sample');
console.log(getFirstTextNode(ul, 'test'));    // "test"
console.log(getFirstTextNode(ul, '"hoge"'));  // SyntaxError: Failed to execute 'evaluate' on 'Document': The string 'descendant::text()[.=""hoge""]' is not a valid XPath expression.
</script>

XPath では文字列リテラルはダブルクォート(")もしくはシングルクォート(')で括りますが、ダブルクォートで括るとダブルクォートを含める事が出来ず、シングルクォートで括るとシングルクォートを含める事が出来ません。
エスケープ方法について調査したところ、XPath 2.0 では "" でダブルクォートをエスケープできる事がわかりました。

• 3.1.1 リテラル - XML Path Language (XPath) 2.0

ところが、Google Chrome 49.0.2623.112 m, Firefox 45.0.1 では期待に反して SyntaxError になってしまいます。

'use strict';
function getFirstTextNode (contextNode, string) {
  return document.evaluate('descendant::text()[.="' + String(string).replace(/"/g, '""') + '"]', contextNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

var ul = document.getElementById('sample');
console.log(getFirstTextNode(ul, '"hoge"'));  // SyntaxError: Failed to execute 'evaluate' on 'Document': The string 'descendant::text()[.="""hoge"""]' is not a valid XPath expression.

XPath でダブルクォート(")をエスケープするにはどんな方法が考えられるでしょうか。

(解決案) concat() で連結する

CertaiN さんに XPath 式の concat() 関数で連結する方法を教えて頂きました。

<ul id="sample">
  <li>test</li>
  <li>"</li>
  <li>"""</li>
  <li>"""x"""</li>
  <li>"hoge"</li>
  <li>'foo'</li>
  <li>"piyo'</li>
</ul>

<script>
'use strict';
var toXPathStringLiteral = (function () {
  function replacefn (match, p1) {

    if (p1) {
      return ',\u0027' + p1 + '\u0027';
    }

    return ',"' + match + '"';
  }

  return function toXPathStringLiteral (string) {
    string = String(string);

    if (/^"+$/g.test(string)) {
      return '\u0027' + string + '\u0027';
    }

    switch (string.indexOf('"')) {
      case -1:
        return '"' + string + '"';
      case 0:
        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn).slice(1) + ')';
      default:
        return 'concat(' + string.replace(/("+)|[^"]+/g, replacefn) + ')';
    }
  };
}());


function getFirstTextNode (contextNode, string) {
  return document.evaluate('descendant::text()[.=' + toXPathStringLiteral(string) + ']', contextNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

var ul = document.getElementById('sample');

console.log(toXPathStringLiteral('test'));             // "test"
console.log(toXPathStringLiteral('"'));                // '"'
console.log(toXPathStringLiteral('"""'));              // '"""'
console.log(toXPathStringLiteral('"""x"""'));          // concat('"""',"x",'"""')
console.log(toXPathStringLiteral('"hoge"'));           // concat('"',"hoge",'"')
console.log(toXPathStringLiteral('\u0027foo\u0027'));  // "'foo'"
console.log(toXPathStringLiteral('"piyo\u0027'));      // concat('"',"piyo'")

console.log(getFirstTextNode(ul, 'test'));             // test
console.log(getFirstTextNode(ul, '"'));                // "
console.log(getFirstTextNode(ul, '"""'));              // """
console.log(getFirstTextNode(ul, '"""x"""'));          // """x"""
console.log(getFirstTextNode(ul, '"hoge"'));           // "hoge"
console.log(getFirstTextNode(ul, '\u0027foo\u0027'));  // 'foo'
console.log(getFirstTextNode(ul, '"piyo\u0027'));      // "piyo'
</script>

更新履歴

• 2016/04/10 10:01 getFirstTextNode における evaluate の第2引数が ul になっていたので contextNode に修正
• 2016/04/10 12:05 concat() で連結するコードを追記 (CertaiN さん発案)
• 2016/04/11 09:50 concat() で連結するコードで """ を指定すると concat() がエラーを返すバグ修正

Answer 1

CertaiNさんが書かれているように XPath 1.0 では concat する方法しかなさそうです
色々調べてみましたがみんながみんな concat してました

2.0 ではエスケープができて解決されたようですが、cssセレクタなどに需要あって、xpath使う人がぜんぜんいないからか、ブラウザでは未だに2.0サポートされてないらしいです

試してみてはいないですがライブラリで 2.0 を使うという手もありかもです
https://github.com/ilinsky/xpath.js

Comments

[mpyw]

興味深いですね！ただ，ユーザランドの実装になるとどうしてもパフォーマンス面で不利になってしまうのが残念です…(concatが妥協点としては優秀かも

[think49]

やはり、concat() しかないのでしょうか。悩ましいですね…。

> ブラウザでは未だに2.0サポートされてないらしいです
2010/12/10に勧告されているXPath2.0が未だに実装されない状況を見るにサポートされる事に期待できないのは残念です…。
XPathはテキストノードを扱える上にコンテキストノードを指定可能でCSSセレクタよりもよっぽど融通が利くと思います。

Answer 2

• XQuery looking for text with 'single' quote

リテラルを分割してXPathのconcat関数で結合する，という方法があるようです．但し分割パートが1つとなってしまった場合にエラーになるので，concat関数の引数が必ず2つ以上になるように空文字列のリテラルを渡す必要があります．

<ul id="sample">
  <li>test</li>
  <li>"hoge"</li>
  <li>'foo'</li>
  <li>"piyo'</li>
</ul>
<script>
'use strict';

function xPathLiteralize(str) {
    var r = "concat('" + String(str).replace(/'/g, "', \"'\", '") + "', '')";
    console.log(r); // just for debugging
    return r;
}

function getFirstTextNode (contextNode, string) {
    return document.evaluate(
        'descendant::text()[.=' + xPathLiteralize(string) + ']',
        ul,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
}

var ul = document.getElementById('sample');
console.log(getFirstTextNode(ul, 'test'));
console.log(getFirstTextNode(ul, '"hoge"'));
console.log(getFirstTextNode(ul, "'foo'"));
console.log(getFirstTextNode(ul, '"piyo\''));
</script>

Comments

[think49]

ありがとうございます。concat() で望む結果を得ることが出来ましたので質問文に私なりのコードを追記しました。
(今気がつきましたが、"" を入力すると concat() がエラーを返しそうですね。帰宅後に修正します。)
回答を頂いたところで恐縮ですが、もう少しエレガントな方法はないものでしょうか。感覚的なものですが、ダブルクォートとシングルクォートを併用する事に居心地の悪さを感じます。
別の解決方法があるかも知れないので1週間ほど待ってからベストアンサーを決めたいと思います。