31

W3C 準拠のブラウザーで JavaScript 範囲オブジェクトの html 文字列を取得する方法はありますか?

たとえば、ユーザーが次の項目を選択したとします。 メソッドHello <b>World</b>
を使用して、"Hello World" を文字列として取得できます。Range.toString()(FirefoxではドキュメントのgetSelectionメソッドでも可能です。)

しかし、内部の HTML を取得する方法が見つからないようです。

DocumentFragmentいくつかの検索の後、範囲をオブジェクトに変換できることがわかりました。

しかし、プロパティDocumentFragmentsはありませんinnerHTML(少なくとも Firefox では。Webkit や Opera は試していません)。
私には奇妙に思えます: 選択したアイテムにアクセスする方法が必要であることは明らかです。

documentFragmentを作成し、ドキュメント フラグメントを別の要素に追加して、その要素の を取得できることに気付きましたinnerHTML。
しかし、その方法は、選択した領域内の開いているタグを自動的に閉じます。
それに加えて、文字列として取得するためだけにdomに取り付けるよりも、明らかに「より良い方法」があります。

では、Range または DocFrag の html の文字列を取得する方法は?

4

6 に答える 6

17

FWIW、jQueryの方法：

$('<div>').append(fragment).html()
于 2014-07-17T18:18:21.723 に答える
15

ここから例を詳しく説明するには：

//Example setup of a fragment 
var frag = document.createDocumentFragment(); //make your fragment 
var p = document.createElement('p'); //create <p>test</p> DOM node
p.textContent = 'test';
frag.appendChild( p  ); 

//Outputting the fragment content using a throwaway intermediary DOM element (div):
var div = document.createElement('div');
div.appendChild( frag.cloneNode(true) );
console.log(div.innerHTML); //output should be '<p>test</p>'
于 2014-07-10T19:20:44.787 に答える
5

いいえ、それが唯一の方法です。約 10 年前の DOM レベル 2 仕様には、HTML テキストとの間でノードをシリアライズおよびデシリアライズするという点でほとんど何もなかったので、innerHTML.

というご意見について

しかし、その方法は、選択した領域内の開いているタグを自動的に閉じます。

...他にどのように機能しますか？DOM は、ツリー状に配置されたノードで構成されています。DOM からコンテンツをコピーしても、ノードの別のツリーしか作成できません。要素ノードは、開始タグと場合によっては終了タグによって HTML で区切られます。終了タグを必要とする要素の HTML 表現には、終了タグが必要です。そうでない場合、有効な HTML ではありません。

于 2011-02-04T11:02:37.413 に答える