HOME

要素からプレーンテキストを取り出す関数の作成 ( javascript )

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

{ 指定要素のプレーンテキスト取得 }
{ ブラウザの innerText プロパティ }
innerText innerHTML
{ 作成した innerText 関数 }
myText プレーンテキスト

処理できるは、 div, p, span, br, #text, のみです。

HTML タグと javascript で動作するテキストエディタ作成の過程で学んだこと。_(:3」∠)_
contenteditable 属性を利用したテキストエディタの手直しを少しずつ続けている。
自分の環境では、挙動もだいぶ落ち着いて、エラーも少なくなってきたように思う。
大量の文字を表示させるような、負荷のかかるような、処理はやってないので、なんとも言えない。

記事には書いてないけど、動作するブラウザも chrome だけではなく、
IE, Firefo でも動くように javaScript を調整。
IE, Firefox で動作させみると、やはり、まともには動いてくれなかった。
返ってくる値を、見てみると、キャレットの位置情報は、ほぼ同じ。
違ったのは、 文字を打ち込んだ時に入力される、 html タグ。
chrome は、div, br だったけど、IE は、 p, br タグが使用されていた。
div も p も同じブロック要素だから、サクッと行きそうな感じはしたけど、そうでもなかった。
IE は、テキストエリアでイベントが発生すると、 2 行改行されたり、enter キーを叩くと、
一気に 2 段、 3 段と改行されてしまうこともあった。
原因を調べてみると、タグ生成に使用していた innerText の値が、
chrome と他のでは、違っていた。
chrome は ブラウザの表示と同じように整形したプレーンテキストを返してくるけど、
IE は、改行多かったり、少なかったり。
アレコレ試したけど、動作を安定させることが出来なかった。ヽ(´ー`)ノ


なので、タグを解析してプレーンテキストを返してくる自作の innerText 関数を書いてみた。
この関数は、全ての html タグには対応出来ていません。
テキストエディタのタグ書き換えの処理に必要だった div, p, span, #text, br タグは処理できると思います。

この関数は、返ってきた値を pre タグに出力した場合、 innerHTML の表示と同じになるように作成しました。
テキストエリアに、div, p, span, #text, br の要素を使用したタグを貼り付けて "変換" をクリックすると、
タグを、要素に流し込み、DOM ツリー化、その要素を解析して innerText と innerHTML の値を表示します。
また、作成した自作 innerText 関数が処理した プレーンテキストの値を表示します。

innerText について調べていたら、下記サイトに innerText の挙動の違いについて書かれた記事がありました。(*‘ω‘ *)
フリーフォーム フリークアウト → DOM の textContent と innerText について
clubajax → Plain Text vs innerText vs textContent

数学の勉強をやり直ししてたりします。_´ω`)_