无法从文件名中删除变音符号

时间:2017-08-24 14:11:37

标签: javascript jquery regex

我在尝试替换变音符号和文件名的特殊字符时偶然发现了一个奇怪的行为。

该函数可以正常使用字符串,但是当我尝试使用文件名为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');
	return str;
}
&#13;
<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>
&#13;
&#13;
&#13;

我也让a fiddle显示了问题,您在上传名为áñaéTõş的jpg时会明白我的意思。

我从输入中获取文件名。奇怪的行为是:

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

我相信它是因为变音符被解释为独立的角色,但是有人知道如何修复它吗?

1 个答案:

答案 0 :(得分:0)

我确信您的代码因codeppoint问题而无效。有问题的人物可能看起来像你期望的特殊字符,但最终不相同。因此,字符串替换不起作用

要解决此问题,正如@ClasG所建议的那样,您可以使用外部库执行Unicode规范化,因为JavaScript没有内置此功能。

  • unorm是低级别的lib,可以为您进行规范化。
  • 还有更多高级别的库,例如iconv lite,它们有更多的依赖关系。

还需要在代码中使用Unicode字符,以便与规范化的文本进行比较。

这是我修改后的fiddle。我希望这能为你解决问题。

PS:您应该正确包含unorm.js。我这样做是为了让它适用于jsfiddle。

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search by any part of name or speed code" title="Type in a name">
 
    <table id="myTable" align="center" style="display: inline-block;">

	<tr>
	<td>Albert Einstein College of Medicine</td>
	<td>718-904-2444</td>
	<td>123</td>
	</tr>
	<tr>
	<td>Bronx Lebanon Hospital Center</td>
	<td>718-518-5118</td>
	<td>123</td>
	</tr>
	
	
    </table>

    <table id="myTable1" style="float: right;">
    <tr>
	<td>1</td>
	</tr>
	<tr>
	<td>2</td>
	</tr>
	<tr>
	<td>3</td>
	</tr>
    </table>