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

Question

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

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

但是，当您将表情符号混入其中时，它会严重中断，因为如果我对数组进行字符处理，一些表情符号字符会被打乱，并且会显示验证失败的错误原因。

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

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

编辑:不能使用 ES6 并且需要一个无效字符数组

Answer 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>