ファイル名から発音区別記号を削除できません

Question

ファイル名の発音記号や特殊文字を置き換えようとすると、私は奇妙な動作に遭遇します。

この関数は文字列で正しく機能しますが、このまったく同じシーケンスをファイル名で試してみるとit doesn'tです。

$(document).on('change', 'input[type=file]', function() { 
 
    var files = this.files; 
 
    for (var i = 0; i < files.length; i++) { 
 
     (function(file) { 
 
     // Assuming the file name is áñǽŦõş 
 
     var _string = 'áñǽŦõş.jpg', 
 
      _filename = file.name; 
 
     $('.string .result').html(convertAscii(_string)); 
 
     $('.filename .result').html(convertAscii(_filename)); 
 
     })(files[i]); 
 
    } 
 
}); 
 
    
 
function convertAscii(str) { 
 
    str = str.replace(/Ä/g, 'Ae'); 
 
    str = str.replace(/æ|ǽ|ä/g, 'ae'); 
 
    str = str.replace(/À|Á|Â|Ã|Å|Ǻ|Ā|Ă|Ą|Ǎ|А/g, 'A'); 
 
    str = str.replace(/à|á|â|ã|å|ǻ|ā|ă|ą|ǎ|ª|а/g, 'a'); 
 
    str = str.replace(/Б/g, 'B'); 
 
    str = str.replace(/б/g, 'b'); 
 
    str = str.replace(/Ç|Ć|Ĉ|Ċ|Č|Ц/g, 'C'); 
 
    str = str.replace(/ç|ć|ĉ|ċ|č|ц/g, 'c'); 
 
    str = str.replace(/Ð|Ď|Đ/g, 'Dj'); 
 
    str = str.replace(/ð|ď|đ/g, 'dj'); 
 
    str = str.replace(/Д/g, 'D'); 
 
    str = str.replace(/д/g, 'd'); 
 
    str = str.replace(/È|É|Ê|Ë|Ē|Ĕ|Ė|Ę|Ě|Е|Ё|Э/g, 'E'); 
 
    str = str.replace(/è|é|ê|ë|ē|ĕ|ė|ę|ě|е|ё|э/g, 'e'); 
 
    str = str.replace(/Ф/g, 'F'); 
 
    str = str.replace(/ƒ|ф/g, 'f'); 
 
    str = str.replace(/Ĝ|Ğ|Ġ|Ģ|Г/g, 'G'); 
 
    str = str.replace(/ĝ|ğ|ġ|ģ|г/g, 'g'); 
 
    str = str.replace(/Ĥ|Ħ|Х/g, 'H'); 
 
    str = str.replace(/ĥ|ħ|х/g, 'h'); 
 
    str = str.replace(/Ì|Í|Î|Ï|Ĩ|Ī|Ĭ|Ǐ|Į|İ|И/g, 'I'); 
 
    str = str.replace(/ì|í|î|ï|ĩ|ī|ĭ|ǐ|į|ı|и/g, 'i'); 
 
    str = str.replace(/Ĵ|Й/g, 'J'); 
 
    str = str.replace(/ĵ|й/g, 'j'); 
 
    str = str.replace(/Ķ|К/g, 'K'); 
 
    str = str.replace(/ķ|к/g, 'k'); 
 
    str = str.replace(/Ĺ|Ļ|Ľ|Ŀ|Ł|Л/g, 'L'); 
 
    str = str.replace(/ĺ|ļ|ľ|ŀ|ł|л/g, 'l'); 
 
    str = str.replace(/М/g, 'M'); 
 
    str = str.replace(/м/g, 'm'); 
 
    str = str.replace(/Ñ|Ń|Ņ|Ň|Н/g, 'N'); 
 
    str = str.replace(/ñ|ń|ņ|ň|ʼn|н/g, 'n'); 
 
    str = str.replace(/Ö/g, 'Oe'); 
 
    str = str.replace(/œ|ö/g, 'oe'); 
 
    str = str.replace(/Ò|Ó|Ô|Õ|Ō|Ŏ|Ǒ|Ő|Ơ|Ø|Ǿ|О/g, 'O'); 
 
    str = str.replace(/ò|ó|ô|õ|ō|ŏ|ǒ|ő|ơ|ø|ǿ|º|о/g, 'o'); 
 
    str = str.replace(/П/g, 'P'); 
 
    str = str.replace(/п/g, 'p'); 
 
    str = str.replace(/Ŕ|Ŗ|Ř|Р/g, 'R'); 
 
    str = str.replace(/ŕ|ŗ|ř|р/g, 'r'); 
 
    str = str.replace(/Ś|Ŝ|Ş|Ș|Š|С/g, 'S'); 
 
    str = str.replace(/ś|ŝ|ş|ș|š|ſ|с/g, 's'); 
 
    str = str.replace(/Ţ|Ț|Ť|Ŧ|Т/g, 'T'); 
 
    str = str.replace(/ţ|ț|ť|ŧ|т/g, 't'); 
 
    str = str.replace(/Ü/g, 'Ue'); 
 
    str = str.replace(/ü/g, 'ue'); 
 
    str = str.replace(/Ù|Ú|Û|Ũ|Ū|Ŭ|Ů|Ű|Ų|Ư|Ǔ|Ǖ|Ǘ|Ǚ|Ǜ|У/g, 'U'); 
 
    str = str.replace(/ù|ú|û|ũ|ū|ŭ|ů|ű|ų|ư|ǔ|ǖ|ǘ|ǚ|ǜ|у/g, 'u'); 
 
    str = str.replace(/В/g, 'V'); 
 
    str = str.replace(/в/g, 'v'); 
 
    str = str.replace(/Ý|Ÿ|Ŷ|Ы/g, 'Y'); 
 
    str = str.replace(/ý|ÿ|ŷ|ы/g, 'y'); 
 
    str = str.replace(/Ŵ/g, 'W'); 
 
    str = str.replace(/ŵ/g, 'w'); 
 
    str = str.replace(/Ź|Ż|Ž|З/g, 'Z'); 
 
    str = str.replace(/ź|ż|ž|з/g, 'z'); 
 
    str = str.replace(/Æ|Ǽ/g, 'AE'); 
 
    str = str.replace(/ß/g, 'ss'); 
 
    str = str.replace(/IJ/g, 'IJ'); 
 
    str = str.replace(/ij/g, 'ij'); 
 
    str = str.replace(/Œ/g, 'OE'); 
 
    str = str.replace(/Ч/g, 'Ch'); 
 
    str = str.replace(/ч/g, 'ch'); 
 
    str = str.replace(/Ю/g, 'Ju'); 
 
    str = str.replace(/ю/g, 'ju'); 
 
    str = str.replace(/Я/g, 'Ja'); 
 
    str = str.replace(/я/g, 'ja'); 
 
    str = str.replace(/Ш/g, 'Sh'); 
 
    str = str.replace(/ш/g, 'sh'); 
 
    str = str.replace(/Щ/g, 'Shch'); 
 
    str = str.replace(/щ/g, 'shch'); 
 
    str = str.replace(/Ж/g, 'Zh'); 
 
    str = str.replace(/ж/g, 'zh'); 
 
\t return str; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="pic" accept="image/*"> 
 

 
<div> 
 
    <div class="string">Converted string : <span class="result"></span></div> 
 
    <div class="filename">Converted filename : <span class="result"></span></div> 
 
</div>

私はまたa fiddleが問題を示す作らáñaéTõşという名前のJPGをアップロードするとき、あなたは私が何を意味するかわかります。

入力からファイル名を取得しています。奇妙な行動はこれです：

console.log(convertAscii(_string)); // Correct => anaeTos 
console.log(convertAscii(_filename)); // Wrong => áñaéTõş 

私は発音区別符号が独立した文字として解釈されているからだと信じている、誰かがそれを修正する方法のアイデアを持っているのでしょうか？ありがとう。

Answer 1

コードポイントの問題が原因でコードが機能しないと確信しています。問題のキャラクターはあなたが期待するスペシャルキャラクターのように見えるかもしれませんが、最終的には同等ではありません。したがって、文字列置換が@ClasGにより示唆されるように、この問題を解決するために

を動作しませんJavaScriptが中に組み込まれて、この機能を持っていないので、あなたは、外部ライブラリのUnicode正規化を行うことができます。

• unormは、あなたのために正規化を行うことができる低レベルのlibです。
• さらに多くの依存関係を持つiconv liteのようなハイレベルなライブラリがあります。

正規化されたテキストとの比較を行う代わりに、コードでUnicode文字を使用する必要があります。

ここに私の変更されたfiddleがあります。これがあなたの問題を解決することを願っています。

PS：正しくunorm.jsを含める必要があります。私はこれをjsfiddleで動かせるようにしました。

<input type="file" name="pic" accept="image/*"> 
<script type="text/javascript"> 
    document.write("\<script src='https://raw.githubusercontent.com/walling/unorm/master/lib/unorm.js' type='text/javascript'>\<\/script>"); 
</script> 
<div> 
    <div class="string">Converted string : <span class="result"></span></div> 
    <div class="filename">Converted filename : <span class="result"></span></div> 
</div> 

    $(document).on('change', 'input[type=file]', function() { 

    var files = this.files; 

    for (var i = 0; i < files.length; i++) { 
     (function(file) { 
     // Assuming the file name is áñǽŦõş 
     var _string = 'äöüß', // 'áñǽŦõş.jpg', 
      _filename = file.name; 

     $('.string .result').html(convertAscii(_string.normalize('NFC'))); 
     $('.filename .result').html(convertAscii(_filename.normalize('NFC'))); 

     })(files[i]); 
    } 

}); 

function convertAscii(str) { 
    //convert German umlauts (normalized using nfc: Canonical Decomposition, followed by Canonical Composition) to Ascii 
    tr = {"\u00e4":"ae", "\u00fc":"ue", "\u00f6":"oe", "\u00df":"ss" } 
    str = str.replace(/[\u00e4|\u00fc|\u00f6|\u00df]/g, function($0) { return tr[$0] }) 
    //... add more.. 

    return str; 
}