1

私はこのHTMLコードを持っています（contenteditable="true"ブロックにあります）：

<ol>
    <li>Mozilla Firefox 1.5+</li>
    <li>Internet <span>Explorer</span> 6+</li>
    <li>Opera 9.6+</li>
    <li>Google Chrome 2+</li>
    <li>Apple Safari 3+</li>
</ol>

ユーザーがこのリストでいくつかのテキストを選択しました:

  • まさに「クロム」という言葉、
  • または正確に«Explorer»という単語（spanタグでラップされています）。

«Chrome» と «Explorer» という単語の主な違いは、«Explorer» という単語はspanタグでラップされているが、«Chrome» はタグでラップされていないことです。

では、選択したテキストが HTML タグでラップされているかどうかはどうすればわかりますか?

  1. いくつかの正規表現で？— HTML タグで選択したテキストを取得する方法がわかりません (選択範囲からプレーン テキストを取得する方法しか知りません)。
  2. 検出範囲のcommonAncestorContainer.parentNode？— 単語 «Chrome» を選択した場合、タグにparentNodeなりますli(ただし、liタグは選択した単語を直接ラップしません。タグのスタイルを設定したくありませんli)。だから、私commonAncestorContainer.parentNodeには役に立たないので使えません。

実際には、選択したテキストにいくつかの CSS スタイルを設定したいだけです。

  1. ユーザーが選択したテキストが既に何らかの HTML タグで直接ラップされている場合、このタグに CSS ルールを追加したい (例: ユーザーが «Explorer» という単語を選択した場合style="font-weight:bold;"、spanタグに追加したい; ユーザーが選択した場合Apple Safari 3+、CSS を追加したい)liタグのルール)
  2. ユーザーが選択したテキストが単なるプレーン テキスト (単語 «Chrome» などのタグで直接ラップされていない) である場合、このテキストをいくつかのタグでラップし、いくつかの CSS ルールを追加したいと考えています。（このアイテムで問題はありません。これを行う方法を知っています。）

UPD: ほら、テキストを選択して実行すると、ブラウザが選択範囲をタグdocument.execCommand('Bold', false, null)でラップします。bまったく同じテキストをもう一度選択して同じdocument.execCommand('Bold', false, null)コマンドを実行すると、太字が消えます。そのため、ブラウザは、私の選択がbタグでラップされていることを何らかの方法で認識し、それらを削除します（アンラップ）。ブラウザは、選択範囲がタグでラップされているかどうかをどのように認識しますか? ブラウザが知っているなら、なぜJSで作るのが難しいのですか?

4

1 に答える 1

2

これはやや複雑な領域です。

  • IE < 9 には、他のブラウザーとはまったく異なる選択と範囲の API があります。
  • 選択したコンテンツを取得してスタイリングするには、慎重な DOM 操作が必要です。

以下に 2 つの提案を示します。

于 2011-10-26T21:19:00.510 に答える