HOME

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

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

推奨 ブラウザ : chrome

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

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

function getInnerText(elem)
{
    function lineCheck(obj)
    {
        var str = "";
            switch(obj.nodeName.toLowerCase())
            {
                case "#text" :
                case "span"  : str = "\n";
                break;
                default      :
            }
            return str;
    }
    function blockCheck(obj)
    {
        var str = "block";
            switch(obj.nodeName.toLowerCase())
            {
                case "#text" :
                case "span"  : str = "line";
                break;
                default      :
            }
            return str;
    }
    var str = "";
    var block = false;
        function getText(obj)
        {
            var c = obj.childNodes;
                for(var i = 0; i < c.length; i++)
                {
                    var pn = c[i].parentNode;
                    var cn = c[i];
                    var eof = "";
                    switch(cn.nodeName.toLowerCase())
                    {
                        case "#text" :
                            str += cn.data;
                            block = false;
                        break;
                        case "span" :
                            if(cn.childNodes.length === 0){ break; }
                            block = false;
                        break;
                        case   "p"  :
                        case "div"  :
                            if(cn.childNodes.length === 0){ break; }
                            if(cn.previousSibling)
                            {
                                if(blockCheck(cn.previousSibling) != "block")
                                {
                                    if(block === false && str[str.length - 1] != '\n')
                                    {
                                        str += lineCheck(cn.previousSibling);
                                    }
                                }
                            }
                            if(pn.childNodes.length != 1 && pn.lastChild != cn)
                            {
                                eof = '\n';
                            }
                        break;
                        case "br"   :
                             if(pn.childNodes.length == 1)
                             {
                                block = true;
                             }
                             else
                             {
                                if(cn != pn.firstChild && cn == pn.lastChild)
                                {
                                    block = true;
                                }
                                else
                                {
                                    block = false;
                                }
                             }
                             str += '\n';
                        break;
                        default :
                    }
                    if(cn.hasChildNodes()){ getText(cn); }
                    if(block === true){ eof = ""; }
                     str += eof;
                }
        }
        getText(elem);
        return str;
}

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

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