詳しくはUnicode(三)Unicode番外の付加文字

各種のフォーラムでは、しばしば変な文字が見られます.その内容は表示範囲を超えています.
例を挙げます

'Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'

よく見られるのはタイ語の文字で構成されているものもあります.ここでは例を挙げません.これらの文が乱れているように見える文字はどのように形成されていますか?
文字の乱れではなく、上の例の文字の長さを出力してみます.

'Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'.length; //75

なんと75文字が含まれています!これらの文字をAray.fromで出力します.

Array.from('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞');
//["Z", "͑", "ͫ", "̓", "ͪ", "̂", "ͫ", "̽", "͏", "̴", "̙", "̤", "̞", "͉", "͚", "̯", "̞", "̠", "͍", "A", "ͫ", "͗", "̴", "͢", "̵", "̜", "̰", "͔", "L", "ͨ", "ͧ", "ͩ", "͘", "̠", "G", "̑", "͗", "̎", "̅", "͛", "́", "̴", "̻", "͈", "͍", "͔", "̹", "O", "͂", "̌", "̌", "͘", "̨", "̵", "̹", "̻", "̝", "̳", "!", "̿", "̋", "ͥ", "ͥ", "̂", "ͣ", "̐", "́", "́", "͞", "͜", "͖", "̬", "̰", "̙", "̗"]

その中のある文字のユニフォームコードポイントを確認します.

Array.from('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞')[10].codePointAt(0);//793, 16   0x0319

Unicodeマッピング表によって0 x 0319の対応する文字を探してみます.U+0300~U+036 Fは結合付加記号と呼ばれていますが、付加記号とは何ですか?
記号を付加すると、アルファベットの上に追加された記号で、アルファベットの発音を変えたり、類似語をスペルで区別したりします.例えば、中国語のピンイン文字「う」の上の2つの小さな点、または「ゲイ」、「啯」の上の記号.変音記号はアルファベットの上か下に置いてもいいし、他の位置に置いてもいいです.複数の付加記号が重畳されると、文字化けのように見えるシンボルが形成される.
タイ語では、母音記号と声調記号から構成されています.
複数の母音記号や声調記号を重ね合わせても同様の効果があります.ここではもう説明しません.
ウェブページの開発では、特にコメントエリアで、「イラスト」の文字が多すぎると、他のユーザーに閲覧障害を与え、読書体験に影響を与えます.ここでは二つの方法が提供されます.
最初は文字列のテキスト領域に最大の高さを設定し、超えた部分は自動的に非表示にします.

p {
    height: 20px;
    overflow: hidden;
}

もう一つの方法はこの特殊な文字をフィルタリングします.追加の文字をフィルタリングします.この方法はある程度正常に表示される追加の記号を誤殺します.しかし、一般的には全体の機能に影響しません.利益は弊害より大きいです.

var regexSymbolWithCombiningMarks = /([\0-\u02FF\u0370-\u1DBF\u1E00-\u20CF\u2100-\uD7FF\uDC00-\uFE1F\uFE30-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF])([\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]+)/g;

function getSymbolsIgnoringCombiningMarks(string) {
    //       :
    var stripped = string.replace(regexSymbolWithCombiningMarks, function($0, symbol, combiningMarks) {
        return symbol;
    });
    
    return stripped;
}

getSymbolsIgnoringCombiningMarks('Z͑ͫ̓ͪ̂ͫ̽͏̴̙̤̞͉͚̯̞̠͍A̴̵̜̰͔ͫ͗͢L̠ͨͧͩ͘G̴̻͈͍͔̹̑͗̎̅͛́Ǫ̵̹̻̝̳͂̌̌͘!͖̬̰̙̗̿̋ͥͥ̂ͣ̐́́͜͞'); //"ZALGO!"

ここまで話しますと、私たちはユニックについてもう詳しく知っています.開発中に問題があっても、根源的なところが見つかると信じています.
符号化の歴史、原理及び照会マップを学ぶことによって、文字化けがどのように発生したかを知り、ES 6または正規表現を利用して、圧倒的多数の符号化問題を解決した.
参考記事:https://zh.wikipedia.org/wikihttps://mathiasbynens.be/note...