Unicode Javascript - 需要向用户显示无效字符答案

【问题标题】：Unicode Javascript - Need to display invalid characters back to userUnicode Javascript - 需要向用户显示无效字符
【发布时间】：2017-12-01 07:02:12
【问题描述】：

我正在寻找能够解决以下问题但对 Unicode 的经验有限的解决方案。

基本上，用户可以在文本字段中输入，但是当他们提交时，我想显示 WEREN"T GSM 兼容的字符列表。即所有没有0-127的字符代码。

但是，当您将表情符号加入组合时，它会严重中断，因为如果我将它的字符数组化，一些表情符号字符会被分解，并且会显示验证失败的错误原因。

I.E "????".length = 2，它将被分成 2 个字符，因此当我告诉用户为什么它失败时，他们会得到错误的原因。

任何关于我如何解决这个问题的想法都将不胜感激。

编辑：不能使用 ES6，需要一个无效字符数组

【问题讨论】：

标签： javascript regex unicode emoji

【解决方案1】：

假设您使用这样的正则表达式来查找不在有效范围内的字符：

/[^\0-\x7f]/

您可以修改它以更喜欢匹配UTF-16 surrogate pairs：

/[\ud800-\udbff][\udc00-\udfff]|[^\0-\x7f]/

在现代浏览器上，您也可以直接使用 u 标志对 Unicode 代码点进行操作：

/[^\0-\x7f]/u

不过，这仍然只会获得代码点，而不是字素簇（对于组合字符、现代组合表情符号、肤色和所有语言的一般正确性很重要）。这些更难处理。当（如果？）browser support appears 时，他们会不那么努力；在那之前，a dedicated package 是你最好的选择。

var NON_GSM_CODEPOINT = /[\ud800-\udbff][\udc00-\udfff]|[^\0-\x7f]/;
var input = document.getElementById('input');

input.addEventListener('input', function () {
  var match = this.value.match(NON_GSM_CODEPOINT);
  this.setCustomValidity(match ? 'Invalid character: “' + match[0] + '”' : '');
  this.form.reportValidity();
});

<form>
  <textarea id="input"></textarea>
</form>

【讨论】：

如果我想显示所有匹配的字符怎么办？不只是一个
编辑：这个更新的正则表达式给了我所有匹配的字符。解决了谢谢 var NON_GSM_CODEPOINT = /[\ud800-\udbff][\udc00-\udfff]|[^\0-\x7f]/g;

【解决方案2】：

您可以使用扩展运算符 (...) 将字符分解为一个数组，然后使用charCodeAt 获取值：

let str = `?abc?def?ghi`;
let chars = [...str];

console.log(`All Chars: ${chars}`);

console.log('Bad Chars:',
  chars.filter(v=>v.charCodeAt(0)>127)
);

【讨论】：

哈比Array.from ES6-y 更多
@Gizmox 标准替换 str.replace(/\w/g,'') 怎么样，这将删除所有 [a-zA-Z0-9_] 字符？

【解决方案3】：

有趣！这只是反复试验，但看起来使用 Array.from 将字符串转换为 ~~chars~~ 字符串数组将允许您正确索引字符：

Array.from('?').length
1

Array.from('?abc').length
4

Array.from('?abc')[0]
"?"

【讨论】：