「\u200B」の検索方法と出現する理由について / JavaScript

「pre枠」にペーストした時に出来るのか？ 

先日、更新したスクリプトコードの公開記事を作り、掲載待ちになったのですが、その記事上の公開コードをコピーして他のブラウザの「Tampermonkey」に登録すると、全く動作しない事に気付きました。 これはたまにある事で、危うく不良コードの掲載を事前に気付いたのですが...

 

コードが不良になったのは、完成したスクリプトコードを「Tampermonkey」から、編集記事の「pre枠」にペーストした時に、そのコードの先頭に「\u200B」という特殊文字が出来てしまったからです。

 

下は、不良コードの先頭部分の「HTML表示編集画面」の表示です。

 

 

「●」のマークの様なものが「\u200B」という特殊文字で、紛れ込んだと言って良いかどうか...　これまでと同じで、「pre枠」のコード先頭への混入でした。

 

「通常表示編集画面」では、これは全く見えません。 普通は存在に気付くことができないので、チェックをすり抜け易い。 「通常表示編集画面」をDevToolsで見ると、下の様な表示です。

 

 

問題の「\u200B」は「&ZerowidthSpace;」と示され、「ゼロ幅スペース」と言う文字と判ります。 この文字は「タブ」「改行」などの親戚と言って良さそうで、特殊機能は「幅が無い空白」という幽霊の様な文字です。 使い途は「HTML上で改行できない位置を明示するのに使う」と書いている記事があり、これは使う側でないとピンと来ないなぁ。

 

とにかくも、この文字に関しては、以前にも苦労して全記事チェックした事があり、ネット上には「混入によるトラブル」に関する記事が、海外も含めて沢山あります。 なにしろ、この1個の文字でコードが無効になりますから。

 

但し、「Tampermonkey」のコード編集画面では常に「●」で表示されます。 スクリプトコードを「Tampermonkey」ペーストして機能しない時、コードの先頭にこの文字が無いか最初にチェックするのを習慣にすると良いと思います。

 

 

 

今回は全記事チェックが出来ない 

過去記事での、同様の混入チェックのため「Every Page Worker 💢💢 Search」を使って検索をしようとしたのですが、大いに躓きました。

 

「💢 RegExp」の正規表現検索で「\u200B」を指定すれば、検出できるはずと思いきや、全ての記事がヒットしてしまいます。 昔はちゃんと出来たのに、何んでそんな事になるのか、理由はなかなか判りません。

 

 

 「\u200B」を探せ

ヒットする記事を適当に開いて「HTML表示」を調べても、案の定何もありません。 そこでツールの一部を書換え、ヒットした記事で検出した個数を「alert」させて調べると、押しなべて「7」個と報告します。 何処に「7」個もあるんやと、今度はテスト記事を幾つも作り、記事の内容をどんどん減らして何がヒットするのか調べました。

 

それで最後に判ったのは、記事末尾に書き込んだ「styleタグ」が有ると、誤検出になるという事です。「styleタグ」の中身は無関係で、とにかくあれば「\u200B」がヒットし、無ければヒットしません。

 

 

推測としては、記事が編集画面に読み込まれ、記事上の「styleタグ」は編集画面に対してスタイルのインジェクションの効力を持つので、この動作が「\u200B」の検出に繋がるらしい。 インジェクションの一瞬に「\u200B」が現れて消えるのか？「Worker 💢💢」が検索する対象は「編集枠の記事のテキスト」だけなんですが。

 

 

どの様にして検索したか 

確かに、以前に「\u200B」を全記事検索した時は、未だ常設の「styleタグ」を使っておらず、今回の様な誤検索は免れたらしい。 ネットをくまなく探しても、記事中の「styleタグ」に対する「\u200B」の誤検索の改善のヒントは出て来ません。

 

で、ダメ元で、ツールが記事を開いて検索作業をする前に、本文中の「styleタグ」を削除するコードを割り込ませました。（ツールの一時的な改造です）

 

「Every Page Worker 💢💢 Search」の 751行以降の仮追加コード

 

function task_in2(doc){ // ブログ本文の検索 🟦⬜🟦
    let iframe_body=doc.querySelector('.cke_editable');

    let css=iframe_body.querySelector('.asa');
    if(css){
        css.remove(); }

    let cke_text=iframe_body.textContent;
    if(search_word2e!="" && cke_text){
        let regex2=new RegExp(search_word2e);
        let result2=regex2.test(cke_text); // 検索❷：結果「hit2」

        let index=entry_id_DB.indexOf(entry_id[k].value);
        if(index==-1){ // IDがblogDBに記録されていない場合
            if(result2==true){
                blogDB.push([entry_id[k].value, 0, 1]); }} // 記事ID/フラグを追加
        else{ // IDがblogDBに記録されていた場合
            if(result2==true){
                blogDB[index][2]=1; } // 記事ID/フラグ「1」を更新
            else{
                blogDB[index][2]=0; }} // 記事ID/フラグ「0」を更新
        reg_set(); }}

 

太字の部分が追加コードで、常設「styleタグ」のクラス名は「asa」なので、これを先に削除してから検索に回しています。「Worker 💢💢」は検索が終わったら「保存しない」で記事を閉じるので、書換えで元記事が変わる事はありません。

 

このコードは思いのほか効果ありで、下の様に目的通りの検索結果になりました。

 

 

良く見ると、下から2番の記事は実際に「\u200B」が有ってヒットが正しい結果ですが、対策前の検索では逆にヒットしていません。 という事は、本文中の「styleタグ」の有無が検索結果を左右して、実際の「\u200B」のヒットを上書きするのではなく無効にしているわけです。（完全に検索結果を誤らせている）

 

但し後のテストで、「styleタグ」が検索機能を完全に駄目にしているのではない事も判りました。 今回の場合は「\u200B」の後に必ず「// ==User」の文字列が続くので、「\u200B// ==User」の検索語で、正しい結果を得る事が出来たのです。 特殊文字の混入全てを調べるには、先の「styleタグ」削除しか方法はなさそうですが。

 

 

 

今後の対策 

私の過去記事を遡って検索すると、2ヵ所のコードに、この「\u200B」を混入させていました。 他の文章中なら問題ありませんが、スクリプトコードでは強敵です。

 

一般的でない作業になりますが、「pre枠」から「\u200B」を排除すればこの問題は安心できます。 これは「 」をスペースに変えて整形する「PreBox Tools ⭐」に、「\u200B」の掃除コードを追加する事で済みそうです。 なにしろ、コード掲載時は、必ず「PreBox Tools ⭐」で整形して投稿しているので。

 

今から、そのコードを作る事にしました。

 

 

 

追記：「\u200B」を入力する方法 

別件でサンプル記事に「\u200B」（ゼロ幅スペース）入力する必要が出来ましたが、これがまた難儀。 ネットを調べて周って、実物をコピーするのが手っ取り早い事が判りました。 確か、HTML編集で入力する方法があったと思うのですが？

 

以下のページで正方形枠の下の「Copy」ボタンを押すとクリップボードにコピーされます。（見えない文字で枠内は空白） 後は編集画面でペーストするだけです。

 

 

様々な文字（シンボル文字）を扱うサイトの様です。 他の文字の場合にも役に立つ事があるかも知れません。

 

なお、アメーバブログの編集画面では、「通常表示」「HTML表示」のどちらでもペーストが出来ました。 もちろん確認は「HTML表示」でないと判りませんが。