Javascript/Regex，用于在键入时格式化字符串

Javascript/Regex for formatting a string as you type

本文关键字：格式化 字符串 Regex 用于 Javascript      更新时间：2024-05-30

我有一个字符串，最多可以有14个字符，包括空格。它将在str.len === 14:中被格式化为这样

var str = 'A1 B2 C3 D4 E5'

我有一个空文本字段，用户正在其中键入文本。一旦他们键入两个字符，（'A1'）我需要在字符串中添加一个尾随空格。他们键入的下一个字符会使字符串看起来像这样：

'A1 B'

我使用的是javascript，需要javascript或regex解决方案来将字符串格式化为用户类型。不应有前导空格，每两个非空格字符后应有一个空格，包括空格在内的字符不应超过14个（第14个字符末尾没有尾随空格）。

到目前为止，我已经尝试过这个：

str.replace(/(..)/g,"$1 ")

但是，只有当str已经是一个10个字符的字符串时，这才有效。当您键入时，空格被添加到字符串中，它会抛出索引。

我还尝试了一些组合，如果使用javascript的%运算符，只要你输入一个字符串，它就可以很好地工作。但是，如果用户通过添加到字符串的开头来编辑一个7个字符的字符串，它就会丢弃所有内容：

if (str.length === 14) {
    return;
}
if (str.length > 0 && str.length % 3 === 2) {
    newValue = newValue + ' ';
}

欢迎提出任何建议。

看起来你希望人们输入HEX，为什么不更严格并删除&每次重新添加空格，然后限制输入

var str = 'A1B';
str.replace(/0x|[^0-9a-zA-Z]/g, '').replace(/(..)(?!$)/g, '$1 ').slice(0, 14);
// "A1 B"
// and possibly set cursor position
// (do the char removal on [0..old_pos] to figure out char difference to new_pos)

这也将解决在输入中间粘贴或键入等问题，因为空间将始终移动到它们应该是的位置

// or e.g. str = 'A1B2C3D4E5F6'; // longer than expected
// becomes
// "A1 B2 C3 D4 E5"

额外钞票

  • 我去掉了0x，因为它是一个常见的十六进制前缀，您不需要它，但可以粘贴进去
  • (?!$)防止拖尾空间
  • 对于某个正整数x，您的最大长度应该始终为3x - 1（对于14也是如此）

这可能不是最优雅的代码，但我会让代码在每次添加字母或数字后遵循以下过程：

  1. 获取光标位置
  2. 获取字符串
  3. 从字符串中删除所有空格
  4. 在所需位置重新添加空格
  5. 将光标放回原来的位置

使用格式化程序.js库的解决方案：

new Formatter(document.getElementById('text'), {
  'pattern': '{{**}} {{**}} {{**}} {{**}} {{**}}'
});
<script src="http://firstopinion.github.io/formatter.js/javascripts/formatter.js"></script>
<input type="text" id="text" />

相关文章：