というわけでやってまいりましたこのコーナー! 本日のお題は「Selection内のHTML Textをいい感じに取得する - 枕を欹てて聴く」でございます。選択範囲のHTMLソースを抜き出すというやつですね。では早速いってみましょう!
if(src.focusNode){
// selection
まずは HTML5 テキスト選択 API の Selection
オブジェクトが登場! 以後これに対する操作が続きます。しかしこの Slection
オブジェクト、getRangeAt
メソッドを使うとなんと選択範囲に対応する DOM 2 Traversal and Range の Range
オブジェクトが取れちゃうんです!
// common parent node search
(以下 21 行省略)
それ Range#commonAncestorContainer
[LINK] で取れるよ!
// common配下のindexを見て, focus と anchorがどちらが前方かを調べる
(以下 9 行省略)
それ Range#startContainer
[LINK] と Range#endContainer
[LINK] でわかるよ!
// focusに沿って後方をremove
(以下15行省略)
// anchorに沿って前方をremove
(以下11行省略)
それ Range#extractContents()
[LINK] か Range#cloneContents()
[LINK] でできるよ!
というわけで不要な要素を除去する部分は置いといて今までの経過をまとめてみると、
function convertToHTMLString(source, safe) {
if (!source || (source.getRangeAt && source.isCollapsed)) return '';
var range = source.getRangeAt ? source.getRangeAt(0) : null;
var node = range ? range.cloneContents() : source.cloneNode(true);
if (safe) { ... }
return new XMLSerializer().serializeToString(node);
}
なんということでしょう! コメント空行抜きでも 86 行あった部分が実質たったの 2 行に!
これに残った部分を付け足していくわけですが、出来上がった品はこちらになります。(お試しはこちら!)
Range
かわいいよ Range
。Range
を作ろうとするとエラーになっちゃう……、ぐすん。(10.50 は試してない。)以上、もろもろの要因で無駄にハイテンションの nanto_vi (なんと) がお届けしました!
セコメントをする