javascript - JavaScriptを使用して範囲を強調表示できない

原文 javascript html uiwebview range

範囲を強調表示する以下のコードは失敗します。 Try out the code.

function rangeFromString(rangeString)
{
     var rangeStringSplit = rangeString.split(/\|/g);
     var range = document.createRange();
     var node = document.evaluate(rangeStringSplit[0], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
     range.setStart(node, Number(rangeStringSplit[1]));
     node = document.evaluate(rangeStringSplit[2], document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
     range.setEnd(node, Number(rangeStringSplit[3]));
     console.log(range);
     return range;
}

function highlightRangeString(rangeString,color)
{
     if (rangeString != null)
     {
          var range = rangeFromString(rangeString);
          console.log(range);

          var sel = window.getSelection();
          sel.removeAllRanges();

          sel.addRange(range);
          document.designMode = "on";
          document.execCommand("hiliteColor", false, "#"+color);
          sel.removeAllRanges();
          document.designMode = "off";
     }
}


以下のコードを試しましたが、

highlightRangeString("/HTML[1]/BODY[1]/DIV[1]/DIV[2]/P[1]/SPAN[1]/text()[1]|2|/HTML[1]/BODY[1]/DIV[1]/DIV[2]/P[1]/SPAN[1]/text()[1]|20", "ff0000");


このコードの何が問題になっていますか?

ハイライトを選択して範囲に適用するにはどうすればよいですか?
答え
これは、ハイライト表示しようとしている文字がテキストノード内の空白文字であり、レンダリングされたHTMLで折りたたまれているため、それらを含む選択も折りたたまれているためです。テキストを含む<span>要素内の改行とインデントを削除すると、期待どおりに機能します。

デモ:http://jsfiddle.net/zjd3d7ud/5/
関連記事

javascript - Knockoutjsクリックバインディングが機能しなくなった

javascript - HTMLに解析されたJSONデータの<script>タグのエスケープ/削除

javascript - ドロップダウンに表示される複数のcssファイルからCSSクラスのリストを取得します

javascript - <a>タグが混在するテキストノードをjQueryでラップする方法は?

javascript - MVCプロジェクトのアクションから返されたHTMLファイルのスクリプトへのパスが正しくありません

javascript - node.jsのjQueryパッケージに$ .ajaxメソッドがないのはなぜですか?

javascript - 重複のAngular ng-repeat

javascript - iPadのフルカレンダーバージョン2のドラッグイベント

javascript - コマンドラインクライアントと対話する

javascript - JavaScriptの配列値をスキップしますか?