JavaScript

HTMLソースをタグ括弧内 / タグ括弧外に切り分けるコード

これまでの方式は、「検索文字」が入力されて決定した段階で、TEXTノード（タグ括弧外）とHTMLコード（タグ括弧内）のヒット数を調べ、TEXT処理をするかHTMLコードの処理をするかを自動的に選別していました。

この様な方式にしたのは、タグ括弧内も括弧外も同時に処理する方式で、HTMLコードとTEXTに同じ文字列がある場合は処理が出来なかったからです。

例えば、記事中に「spanish」（スペイン語）という文字がある時に、HTMLコードで「span」→「span style="color: blue"」の書き換えで文字色の操作をすると、記事中の文字は「span style="color: blue"nish」という思わぬ結果になります。異変に気付けばまだ良い方で、気付かない場合も有り得るわけです。反対にTEXT側の変更時に、HTMLコードの思わぬ書き換えをしてしまう事もあり得ます。

この様な間違いを防ぐために自動選別をして、両方にヒットがある場合は処理不能としているわけです。しかしユーザー側は、置換えるのがTHMLコードかTEXTかは判っているので、処理する方を選択できれば「最も使える」機能になります。

そのためには、HTMLソースコードをTEXTノード（タグ括弧外）とHTMLコード（タグ括弧内）に切り分ける処理が必要です。

コードを試作する

そういうコードはどこかにあるかも知れませんが、ここは自作を試みます。ブラウザは、先ずそういう事をして開始タグと終結タグを分析して、HTML構造を解析してページをレンダリングしているはずですから、その入り口を真似るぐらいは出来ます。

以下のテストコードは、「Tampermonkey」の新規編集画面にコピー&ペーストして試す事ができます。

〔コピー方法〕　軽量シンプルなツール「PreBox Button 」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎記事編集の「通常表示」画面で、ショートカットキー「Ctrl +F6」で起動します。

◎1度実行された後でも、何度でも起動できます。ただし、一旦「HTML表示」を開くと起動しなくなります。その場合は編集画面をリロードすると再び起動できます。

◎配列の偶数番に収納したタグ括弧外（TEXTノード）を、順にアラート表示します。

TEXTノードの最末尾は「undifined」が表示されます。このコードは、本文末尾にTEXTノードが無いのを確認して終了するので、敢えて表示しています。

◎長い記事で試すとなかなか終わらないので、短い文章で試すのがベターです。

〔注〕早く終了したい場合は「Enter」キーを長押しをしてください。アラート表示中はブラウザのリロードが出来なくなる場合があります。

〔注〕HTMLソースの切り分けを見せるだけで、加筆をするコードではありません。しかしどうしても終了出来ない場合は、保存せずブラウザを閉じてください。従って、投稿記事の編集中は、それまでの編集内容を失うのでテストを避けて下さい。

◎タグ括弧内（HTMLコード）は配列の奇数番にあり、コードの最後のコメントアウトを外すと表示できます。こちらは、TEXT以上に数が多くなります。

〔タグ括弧内とタグ括弧外を選別するテストコード〕

// ==UserScript==
// @name         ▩▩ TEST CODE ▩▩
// @namespace  http://tampermonkey.net/
// @version      0.1
// @description  タグ括弧内とタグ括弧外を選別するテストコード
// @author       Ameba Blog User
// @match        https://blog.ameba.jp/ucs/entry/srventry*
// @grant         none
// ==/UserScript==


window.addEventListener('load', function(){
    let editor_iframe;
    let iframe_doc;
    let iframe_body;


    catch_key();

    function catch_key(){
        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        if(editor_iframe){ //「通常表示」の場合

            document.addEventListener("keydown", check_key); // documentは先に指定
            iframe_doc=editor_iframe.contentWindow.document;
            if(iframe_doc){
                iframe_doc.addEventListener("keydown", check_key); } // iframeは後に指定

            function check_key(event){
                if(event.ctrlKey==true){
                    if(event.keyCode==117){ //「Ctrl + F6」で起動
                        editor_iframe.blur();
                        search_case();
                    }}}}} // catch_key


    function search_case(){
        editor_iframe=document.querySelector('.cke_wysiwyg_frame');
        if(editor_iframe){ //「通常表示」の場合
            iframe_doc=editor_iframe.contentWindow.document;
            iframe_body=iframe_doc.querySelector('body.cke_editable'); }

        let buffer=iframe_body.innerHTML; // HTMLソースコード

        let buffer_arr=[]; // 切分けたソースコードを入れる配列
        let sa;
        let sb;
        let sc;
        let n; // 開始・終結を含む全タグ数

        sa=0;
        n=buffer.split('<').length-1; // 全タグ数を取得

        for(let k=0; k<n; k++){
            sb=buffer.indexOf('>', sa);
            buffer_arr.push(buffer.slice(sa, sb+1)); //タグ括弧内 1個を配列に収納
            sc=buffer.indexOf('<', sb+1);
            if(sc==-1){ break; } // 文書の末尾で後がない場合に終了
            else{
                buffer_arr.push(buffer.slice(sb+1, sc)); //タグ括弧外 1個を配列に収納
                sa=sc; }}

        for(let i=0; i<n; i++){
            if(buffer_arr[i*2+1]!=''){
            alert(buffer_arr[i*2+1]); }} //配列の奇数のインデックスはタグ括弧外（TEXT）

  //              for(let i=0; i<n; i++){
  //                  alert(buffer_arr[i*2]); } //配列の偶数のインデックスはタグ括弧内8（HTMLコード）

    } // search_case()
});

選別コードの問題点

アメブロの記事では、スクリプトタグ等が制限されるので、HTMLコードがTEXTとして混ざり込む事は、殆どありません。ただし <style>タグがあると、その内容は「タグ括弧外」なので「TEXT」として選別されます。記事中に使っている人はそう多くはないでしょうが、これは少し用心が要ります。

可能なら<style>タグの中身に関しては、「TEXT」に選別しないコードを作りたいものです。

他に「TEXT」に混ざり込むHTMLコード（と考えて良いもの）は「 」です。これは「半角空白文字」の代わりに使われるものですが、私は「Font Awesome」のマーク文字「」を表示する時に使っています。これがTEXTの置換で誤って置換えられる事は、かなり考え難いです。（絶対ないとは言えませんが）これはユーザーの注意に任せる程度で良いのではと思っています。

他に、問題になる場合はないか、もう少し調べてみます。