Javascript 如何为IBAN注册每4个字符插入一个空格？
我是JavaScript新手，我想在我的输入文本中添加空间插入，以便注册IBAN帐户Javascript 如何为IBAN注册每4个字符插入一个空格？,javascript,regex,Javascript,Regex,我是JavaScript新手，我想在我的输入文本中添加空间插入，以便注册IBAN帐户 您必须捕获每组4位数字，然后在每组之间留出一个空格 $('input').blur(function () { //Replace each group 4 digits with a group plus a space var reformat = this.value.replace(/(\d{4})/g, function(match){ return mat
$('input').blur(function () {
//Replace each group 4 digits with a group plus a space
var reformat = this.value.replace(/(\d{4})/g, function(match){
return match + " ";
});
this.value = reformat;
})
//Keys pressed 0 times
var downed = 0;
$('#test').keydown(function (g) {
if(g.code.match("^Digit")){
downed++;
console.log(g)
}
if(downed == 1){
var reformat = this.value.replace(/(\d{4}\s*)/g, function(match){
//Strip spaces
if(match.match(/\s/)){return match;}
return match + " ";
});
console.log(reformat);
this.value = reformat;
//Start recount
downed = 0;
}
});
使用纯JavaScript查看，我建议：
function space(el, after) {
// defaults to a space after 4 characters:
after = after || 4;
/* removes all characters in the value that aren't a number,
or in the range from A to Z (uppercase): */
var v = el.value.replace(/[^\dA-Z]/g, ''),
/* creating the regular expression, to allow for the 'after' variable
to be used/changed: */
reg = new RegExp(".{" + after + "}","g")
el.value = v.replace(reg, function (a, b, c) {
return a + ' ';
});
}
var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
space(this, 4);
});
function space(str, after) {
if (!str) {
return false;
}
after = after || 4;
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + after + "}", "g");
return v.replace(reg, function (a) {
return a + ' ';
});
}
var el = document.getElementById('iban');
el.addEventListener('keyup', function () {
this.value = space(this.value, 4);
});
document.getElementById（'iban'）.addEventListener（'input'，function（e）{
e、 target.value=e.target.value.replace（/[^\dA-Z]/g'，）.replace（/（.{4}）/g'，$1'）.trim（）；
});
iban
我需要相同的，但用于BVR/BVR+瑞士付款单。
所以我需要的是从字符串的末尾每隔5个字符添加一个空格
例如：“52 86571 22001 00000 10520 15992”或有时更短，如“843 14293 10520 15992”
因此，如果rev=1，那么在添加空格之前和之后反转字符串就是解决方案
function space(str, stp, rev) {
if (!str) {
return false;
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
if(stp > 0) {
var v = str.replace(/[^\dA-Z]/g, ''),
reg = new RegExp(".{" + stp + "}", "g");
str = v.replace(reg, function (a) {
return a + ' ';
});
}
if (rev == 1) {
str = str.split('').reverse().join('');
}
return str;
}
使用：
编辑：添加了PHP版本
function space($str=false, $stp=0, $rev= false) {
if(!$str)
return false;
if($rev)
return trim(strrev(chunk_split(strrev($str), $stp, ' ')));
else
return trim(chunk_split($str, $stp, ' '));
}
在一根管子里有成千上万的人
integer = integer.replace(/[^\dA-Z]/g, '').replace(/(.{3})/g, '$1.').trim();
Josh Crozie的代码非常好，但并不完整
有两个问题
- 如果插入符号不在末尾，而是在前一个位置，并且用户开始键入，则有时插入符号不会停留在前一个位置
- 另一个问题是Android 7+设备。这些设备稍晚更新插入符号位置，这意味着在读取插入符号位置之前需要setTimeout（）
下面的代码基于Josh Crozie的代码，现在已经修复了上面提到的两个问题，并且出于可读性目的，代码更加详细：
var isAndroid=navigator.userAgent.indexOf（“ndroid”）>-1；
var元素=document.getElementById（'iban'）；
元素。addEventListener（'input'，function（）{
if（isAndroid）{
//对于android 7+来说，光标位置的更新有点落后，因此延迟很小。
设置超时（重新格式化输入字段）；
返回；
}
reformatInputField（）；
});
函数reformatInputField（）{
函数格式（值）{
返回值。替换（/[^\dA-Z]/gi'，）
.toUpperCase（）
.替换（/（.{4}）/g，'$1'）
.trim（）；
}
函数计数空间（文本）{
变量空格=text.match（/（\s+）/g）；
返回空格？空格。长度：0；
}
变量位置=element.selectionEnd；
var previousValue=element.value；
element.value=格式（element.value）；
if（位置！==element.value.length）{
var beforeCaret=previousValue.substr（0，位置）；
var countPrevious=countSpaces（beforeCaret）；
var countCurrent=countSpaces（格式（beforeCaret））；
element.selectionEnd=位置+（countCurrent-countPrevious）；
}
}
iban
这是在输入时使用JQuery的最短版本，输入类型为number
或tel
：
$('input[type=number], input[type=tel]').on('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
您还可以将4更改为任何其他字符限制。我编写了一个简单的函数，扩展了David的函数来处理最后一个空格。还可以指定分隔符
函数空间（str，after，c）{
如果（！str）{
返回false；
}
after=在| | 4之后；
c=c | |“”；
var v=str.replace（/[^\dA-Z]/g'，），
reg=新的RegExp（“.{”+“}”之后的“.{”+”，“g”）；
返回v.replace（注册，功能（a）{
返回a+c；
})。替换（/[^0-9]+$/，“”）；
}
console.log（spacify（“123131”，4“”）
console.log（spacify（“12313”，4，“-”）
如果您试图使用信用卡调整文本输入，那么此方法也将帮助您解决退格问题
document.getElementById（'iban'）.addEventListener（'input'，function（e）{
e、 target.value=e.target.value.replace（/[^\dA-Z]/g'，）.replace（/（.{4}）/g'，$1'）.trim（）；
});
iban
在4位数字后添加空格
用于验证IBAN编号
document.getElementById('IBAN').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="IBAN">IBAN</label>
<input id="IBAN" maxlength="14" type="text" name="IBAN" />
document.getElementById（'IBAN'）。addEventListener（'input'，函数（e）{
e、 target.value=e.target.value.replace（/[^\dA-Z]/g'，）.replace（/（.{4}）/g'，$1'）.trim（）；
});
伊班
单凭HTML无法做到这一点。然而，你可以使用JavaScript来实现这一点，而不仅仅是html是做不到的。你需要JS。啊，该死的，我需要知道怎么做。谢谢^^如果有人离开输入
，或者在他们打字时，是否必须这样做？什么字符是允许的？当打字使输入更可读时。只允许使用A-Z大写和数字，这是用于IBAN注册的。IMHO，您应该使空格
函数处理字符串，而不是元素。然后它可以处理任何值，而不仅仅是HTMLInput
元素的.value
值。没错，但我试图保持它相对简单（不过，一旦我解释了这一点，并停止纠正它以解释我自己的愚蠢，我可能会更新它以这样做）。@Alnitak：最后，完成了。我完全忘记了这个答案=/我真的很喜欢打字时更新的版本。唯一的问题是，直到您到达第6位，它才放在第一个空格中，如果您返回空格以更正错误，它的行为也会异常。最终的结果仍然很好，但可能会让用户感到困惑。@梯形图专家很好的建议，看看这个提琴什么是用例，target.value.charAt（length-1）==''&&length
onChangeText={number => {
const data =
number.length % 5 !== 4
? number
.replace(/[^\dA-Z]/g, '')
.replace(/(.{4})/g, '$1-')
.trim()
: number;
this.setState({
...this.state,
card: {...this.state.card, number: data},
});
}}
document.getElementById('IBAN').addEventListener('input', function (e) {
e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});
<label for="IBAN">IBAN</label>
<input id="IBAN" maxlength="14" type="text" name="IBAN" />