2011-12-17 9 views
0

$(要素).text()と$(要素).html()の出力を比較してhtmlタグの場所を判断するルーチンを作成しようとしています。これは後で、document.execCommand()に頼らずに、contenteditableに "strong"や "em"のような書式設定タグを適用するために使用されます。この時点で必須の文字列はhtmlエンティティに変換されますか?

私は$(要素)の.text()出力で、このような「>」、「<」などの文字を、比較の仕事をするためにそれを実現し、「&」それぞれのHTMLに変換する必要がありますエンティティ。 Firebugから、これらの文字がinnerHTMLプロパティで自動的に変換されることがわかります。私は他の文字を試しました。引用符やウムラウトなどの文字列は変換されません。

私の質問は以下のとおりです。

  1. は、ブラウザ間で一貫して変換します不可欠な文字のセット(私の推測は次のようになり>、<、および&)はありますか?私のターゲットブラウザはFirefoxとChromeですが、これはIEではありません。

  2. この文字セットはjQueryの.html()メソッドで尊重されているのですか、jQueryはさまざまなブラウザ間で相違点を調整するために独自の方法を使用していますか?もしそうなら、jQueryがエンティティに変換する重要な文字の包括的なリストはどこにありますか?

さらに明確化:

のcontentEditableに私は手動でこのテキストを持つ段落を入力した場合:

some text, and some characters >, <, ", &, ', ë 

$('p').text()は私を与える:

some text, and some characters >, <, ", &, ', ë 

$('p').html()がしますが私に教えてください:

some text, and some characters &gt;, &lt;, ", &amp;, ', ë 

これは、firebugとchromeの開発ツールの両方で見られる結果です。

<、>、&は、引用符や特殊文字は使用できませんが、すべてが機能するためには必須です。

$('p').html()の出力と一致するように、find/replace allを使用して$('p').text()の結果をタグ自体から変換したいとします。

わかりやすい<、>、および&のどの文字が完全一致するにはhtmlエンティティに変換する必要があるかを知る必要があります。私は既存のWYMEditor、それが付属していますインラインフレームに頼ることなく、のcontentEditableのdivを持つ単純なWYSIWYMエディタを構築しようとしています

:これは何のためにあるのか

これは制御された環境(私のカスタムCMS)で使用され、HTMLエディタで予想される機能のサブセットを許可します。基本的には、contentheitable divにあるP、H1-H6、UL> LI、OL> LIタグの束です。

コンテンツタグ(UL、OLの子を持たないP、H1-H6、およびLIタグ)は、STRONG、EM、A、SUB、SUPおよびSPANタグのみを含むことができます。

私はIEをターゲットにしていませんが、プラットフォームの違いなくFFとChromeでこの機能を使用したいと考えています。これらのプラットフォームの違いの1つは、テキストを太字または斜体にするときにdocument.execCommand()が実行される方法です。 FFは選択をラップし、クロムはタグを使用します。私はフォーマットを適用するために次の方法を使用することに決めました:

  1. 選択範囲を取得します。
  2. 範囲内のすべての「コンテンツタグ」をリストします。
  3. rangeオブジェクトを使用し、それぞれの "content tag"との関係を説明します。選択前、選択前、選択後の3つのテキストを定義します。これらは、特殊文字がエンティティに変換されていないストレートテキストとして送信されます。
  4. それぞれの "content tag" innerhtmlについて、私は各種類のタグの "マップ"に分解するために文字ごとに解析します。私はタグの階層を確立しました:a> span> sub> strong> em。 「マップ」このようなものになります。innerHTMLのため

:選択の前に、選択、選択テキストだけでなく、フォーマット操作の後を使用してthis <em>is <strong>a</strong></em> <a href="#"><strong>test</strong>テキスト

text: this is a test text 
    a: __________XXXXXXXXX 
strong: ________X_XXXX_____ 
    em: _____XXXX__________ 
  1. 、私はその後、マスクを作成します。例えば、「これは」太字する必要がある場合:マスクは次のようになりますマップとマスクを合成後
text: this is a test text 
strong: XXXXXXX____________ 
  1. 、結果として得られるマップである:
text: this is a test text 
    a: __________XXXXXXXXX 
strong: XXXXXXX_X_XXXX_____ 
    em: _____XXXX__________ 
  1. このマップは、HTMLに変換されます:
<strong>this <em>is</em></strong><em> </em><strong><em>a</em></strong> <a href="#"><strong>test</strong> 
  1. は、 "コンテナタグ" 結果のHTMLとのinnerHTMLプロパティを交換してください。

私がこの質問をしたのは、htmlから抽出されたテキストチャンクと、完全に一致する範囲で私に与えられたテキストが必要なことです。だから、私は特殊文字を変換することはできませんが、 "必須"文字だけを変換します。

この問題は、この問題を解決する最も簡単で最速の方法ではないかもしれないが、私は視覚的思考者であり、何とか2次元グリッドで問題をレイアウトすることが非常に役立ちます。

答えて

1

ここで試して尋ねていることはわかりません。今私が言うことができるすべてのために

は次のとおりです。 .html()/ .innerHTMLに書き込まれた場合は、[はい、 <>&(も '"彼らと一緒に引用された属性の内部で使用している場合) べきをエスケープします。彼らはすべての場合で をエスケープする必要はありませんが、常にそれを行うことは間違いありません。

より広範な回答が必要な場合は、より具体的にする必要があります(コード例など)。

EDIT:

は、私はまだ、私はあなたが達成しようとしているのか理解かはわかりません。 p要素内のHTML要素(タグ)を取り除こうとしていますか?次に、あなただけのテキストを読んで、それをバックに設定を設定することができます

$("p").text($("p").text()); 

をそれとも、ただの問題の文字を変換する必要がある場合、あなたは「unanonymous」要素を使用することができ、それはあなたがOの変換を希望するテキストにtextだ設定します.html()を読んでください:

alert($("<div>").text("some text, and some characters >, <, \", &, ', ë").html()); 
+0

ありがとうございます、私はさらに明確に質問を更新しました。私はこれに関連するコードを持っていません。 – Andri

+0

これまでのところ、<, >と&文字のみが必須と思われます。受け入れ – Andri

+0

@Andri:私の更新を参照してください。 – RoToRa

関連する問題