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

Question

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

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

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

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

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

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

Answer 1

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

Array.from('').length
1

Array.from('abc').length
4

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

Answer 2

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

/[^[=10=]-\x7f]/

你可以修改它来匹配UTF-16 surrogate pairs:

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

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

/[^[=12=]-\x7f]/u

这仍然只会得到代码点，而不是字形簇（对于组合字符、现代组合表情符号、肤色和所有语言的一般正确性很重要）。那些更难处理。什么时候（如果？）browser support appears, they will be less hard; until then, a dedicated package 是您最好的选择。

var NON_GSM_CODEPOINT = /[\ud800-\udbff][\udc00-\udfff]|[^[=13=]-\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>

Answer 3

可以使用展开运算符(...)将字符拆分成一个数组，然后charCodeAt得到值：

let str = `abcdefghi`;
let chars = [...str];

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

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

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

Unicode Javascript - Need to display invalid characters back to user

javascript

regex

unicode

emoji