「Both-WH」絵文字対策の修正 5 / JavaScript

特異な絵文字をフィルターする基本コード

フィルターの指標に「特異な絵文字の先頭サロゲートペア」を使います。フィルター部のコードは、以前に使った絵文字フィルターの応用です。最初にフィルターパターンを作り、「 RegExp() 」で正規表現オブジェクトを作ります。それを使ってアクティブ行に「 test() 」メソッドを実行します。

var zero_pattern = [
    '\uD83C\uDFC3',
    '\uD83C\uDFC4',
    '\uD83C\uDFCA',

//  ここに特異な絵文字の先頭サロゲートペアの文字コードが並ぶ

    ].join('|');

var zero_regex = RegExp( zero_pattern );
var zero_stop=0;
if( zero_regex.test( activeline.textContent ) == true ){
    alert("記入されたマーク文字 █ を手作業で削除してください");
    zero_stop=1; }

「test」は、特異な絵文字がアクティブ行に有った場合は、「手作業で削除してください」を表示します。また、変数「zero_stop」を「1」にして、以降のマーク文字削除のコードに削除を中止させます。

フィルターパターンの「zero_pattern」は、先頭サロゲートペアの文字コードを並べたものです。以下は実際のパターンで、前ページの最後のリストの太字部を使っています。（配列の最後の「,」は errorでしたが、最近の JavaScriptでは許可されます）

var zero_pattern = [
    '\uD83C\uDFC3','\uD83C\uDFC4','\uD83C\uDFCA','\uD83C\uDFCB',
    '\uD83C\uDFCC','\uD83C\uDFF3','\uD83D\uDC31','\uD83D\uDC41',
    '\uD83D\uDC68','\uD83D\uDC69','\uD83D\uDC6E','\uD83D\uDC6F',
    '\uD83D\uDC71','\uD83D\uDC73','\uD83D\uDC81','\uD83D\uDC86',
    '\uD83D\uDC87','\uD83D\uDE45','\uD83D\uDE46','\uD83D\uDE47',
    '\uD83D\uDE4B','\uD83D\uDE4D','\uD83D\uDE4E','\uD83D\uDEA3',
    '\uD83D\uDEB4','\uD83D\uDEB5','\uD83D\uDEB6','\uD83E\uDD26',
    '\uD83E\uDD37','\uD83E\uDD38','\uD83E\uDD39','\uD83E\uDD3C',
    '\uD83E\uDD3D','\uD83E\uDD3E','\uD83E[\uDDD6-\uDDDF]'
    ].join('|');

フィルターパターンに加える特殊な例外

前ページでふれましたが、Win10絵文字の総チェックで判明した、「例外的」に特異な絵文字コードをフィルターパターンに追加します。

囲み数字

以下の絵文字は2文字のカーソル位置ズレを生じます。

　 #️⃣ *️⃣ 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣

「 #️⃣ 」のコードは「 \u0023\uFE0F\u20E3 」

「 *️⃣ 」のコードは「 \u002A\uFE0F\u20E3 」

「 0️⃣ ～ 9️⃣ 」のコードは「 \u0030\uFE0F\u20E3 ～ \u0039\uFE0F\u20E3 」

これらをフィルターパターンに追加するテストで、想定外のトラブルがありました。

var zero_pattern = [
    '\u0023\uFE0F\u20E3',
    '\u002A\uFE0F\u20E3',
    '[\u0030-\u0039]\uFE0F\u20E3'
    ].join('|');

パターンは、これらの絵文字のコードを入れただけですが、テストをするとスクリプト全体が異常動作をします。調べると「'\u002A\uFE0F\u20E3'」の行を加えた時だけ異常が発生し、「\u002A」が問題を引き起こす様です。ネットを調べても情報がありせんが、色々試すと、下の様に[ ]で囲むと正常になり「 *️⃣ 」の文字にも正しくフィルターが働きます。「\u002A」が特別な意味を持つのでしょうか？

var zero_pattern = [
    '\u0023\uFE0F\u20E3',
    '[\u002A]\uFE0F\u20E3',
    '[\u0030-\u0039]\uFE0F\u20E3'
    ].join('|');

先頭がサロゲートペアでない絵文字で異体字セレクタが付いたもの

異体字セレクタ「\uFE0F」が付く絵文字はサロゲートペアが先頭に来るものが殆どですが、上記の「囲み数字」以外に「 ⛹️‍♀️ ⛹️‍♂️ 」の2文字だけは先頭が通常の形です。

文字コードは2つあります。

　　　　　　　　　　　　　　\u26F9\uFE0F\u200D\u2640\uFE0F

　　　　　　　　　　　　　　\u26F9\uFE0F\u200D\u2642\uFE0F

これも3文字のズレを生じるので、「\u26F9\uFE0F」をフィルターに追加します。

〔参考〕この文字コード先頭の「\u26F9」だけで、Win10の Chrome上では上図のバスケ選手が表示されます。一方、Win10タッチキーボードからは異体字セレクタ「\uFE0F」が着いた「 ⛹️‍♀️ ⛹️‍♂️ 」の2文字が入力され、下はこれを拡大したものです。

上側はヘアーバンドをした女子選手、下側は「\u26F9」と同じ、つまり男子選手の様です。異体字セレクタで「男女」の違いを使い分けられる様にしているのでしょう。ただし、Win7環境ではこの絵文字がOSに無いため、下の様に「twemoji」が代替表示されます。

以下に面白い方法を書いた記事があります。

WindowsでUnicode文字を簡単に入力したり、Unicodeの文字コード番号を調べたりする方法

Win10の「Wordpad」で「\u26F9」をこのページの方法で試すと、下の様な旧来のモノクロの絵文字が表示されます。

本来「\u26F9」だけならモノクロの絵文字が表示される様に思うのですが、Chromeで「\u26F9」がカラー絵文字になります。これには複雑な理由がある様です。

全てを纏めた「Both-WH」のフィルター

以下が特異な絵文字を除外するフィルターパターンの完成形です。

パターンの9行目までは、先頭がサロゲートペアの文字コードのもの。後の4行は、先頭がサロゲートペアでないものです。

var zero_pattern = [
    '\uD83C\uDFC3','\uD83C\uDFC4','\uD83C\uDFCA','\uD83C\uDFCB',
    '\uD83C\uDFCC','\uD83C\uDFF3','\uD83D\uDC31','\uD83D\uDC41',
    '\uD83D\uDC68','\uD83D\uDC69','\uD83D\uDC6E','\uD83D\uDC6F',
    '\uD83D\uDC71','\uD83D\uDC73','\uD83D\uDC81','\uD83D\uDC86',
    '\uD83D\uDC87','\uD83D\uDE45','\uD83D\uDE46','\uD83D\uDE47',
    '\uD83D\uDE4B','\uD83D\uDE4D','\uD83D\uDE4E','\uD83D\uDEA3',
    '\uD83D\uDEB4','\uD83D\uDEB5','\uD83D\uDEB6','\uD83E\uDD26',
    '\uD83E\uDD37','\uD83E\uDD38','\uD83E\uDD39','\uD83E\uDD3C',
    '\uD83E\uDD3D','\uD83E\uDD3E','\uD83E[\uDDD6-\uDDDF]',
    '\u0023\uFE0F\u20E3',
    '[\u002A]\uFE0F\u20E3',
    '[\u0030-\u0039]\uFE0F\u20E3',
    '\u26F9\uFE0F'
    ].join('|');

〔注意〕

上枠の表記の外側の[]と内側の[]は意味が違います。

外側の [] は配列を意味し、配列の中の要素を「,」で区切っています。また、後半にある内側の[]は、正規表現の「カッコの中のどれか」を意味し、その中の「-」は一連の範囲を意味します。最後の「join('|');」メソッドは、この配列要素の全てを「or」で繋ぎ、1続きの正規表現のパターンにするものです。