如何在javascript中每n个字符后插入一个字符?


77

我有一个字串: “敏捷的棕色狐狸跳过了懒狗。”

我想使用JavaScript(可能是jQuery)每n个字符插入一个字符。例如,我想打电话:

var s = "The quick brown fox jumps over the lazy dogs.";
var new_s = UpdateString("$",5);
// new_s should equal "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$"

目标是使用此函数将&shy插入长字符串以允许它们进行换行。

也许有人知道更好的方法?


最好让浏览器自动换行。您是否像上面的示例一样使用了很长的句子,或者是很长的单词?
丹·赫伯特

1
浏览器不会说一个字,我会说“ ThisIsAStupidLabelThatOneOfMyUsersWillTryToMakeInMyApplication”等长字
brendan

服务器端解决方案将单词分解为最多n个字符会更好吗?
游泳池

可能,但是对于我当前的困境,更容易实现客户端解决方案。
brendan

Answers:


74
function chunk(str, n) {
    var ret = [];
    var i;
    var len;

    for(i = 0, len = str.length; i < len; i += n) {
       ret.push(str.substr(i, n))
    }

    return ret
};

chunk("The quick brown fox jumps over the lazy dogs.", 5).join('$');
// "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs."

@Andy E:呵呵,在结账之前它们是可选的}。我什至不知道我已经这样做了。它源于js压缩器成为标准之前的几年中“必须保存每个字节”的思想;)
Crescent Fresh 2009年

String.split("")Array.form()

regex&string.split()&array.form()&slice()&map()&JSON.parse()

176

与正则表达式

"The quick brown fox jumps over the lazy dogs.".replace(/(.{5})/g,"$1$")

The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$

干杯,


10
该死的!那里很好的正则表达式。BTW是$替换字符串中的最后一个吗?
新月新鲜

2
不需要替换字符串中的最后一个$,您可以将要放入的内容以5个空格的间隔放在此处,例如<br>
skymook

6
我到了"string".replace(/.{5}/g, "$&" + "<br>");。最后的串联只是为了使其更易于阅读。$&替换中匹配的字符串匹配,因此不需要分组。
matpie 2014年

3
从字符串末尾算起,该如何工作?
2014年

大。一个重要的注意事项是,如果字符串包含换行符,则由于每行的开头.都不为\n或,所以将从零开始计数\r。这对于折叠长行的纯文本是完美的,但是对于Web内容可能不是理想的。要在比赛中包含换行符,请使用/[\s\S]{5}/g
缺少

36

把事情简单化

  var str = "123456789";
  var parts = str.match(/.{1,3}/g);
  var new_value = parts.join("-"); //returns 123-456-789

万一我有一个十个字母的数字,而我只想在第三个和第六个字母之后有一个“-”怎么办!而不是第9个字母。
学习者

@Learner使用正则表达式删除最后一个“-”。
Kareem '18

可以分享吗?提前致谢。
学习者

1
“ 123-456-789-0” .replace(/-([^-] +)$ /,'$ 1'); //删除最后一个破折号
-Kareem

喜欢这个主意。能否同时进行(在用户仍在键入时)?
JonSnow

4
let s = 'The quick brown fox jumps over the lazy dogs.';
s.split('').reduce((a, e, i)=> a + e + (i % 5 === 4 ? '$' : ''), '');

说明:split('')将字符串转换为数组。现在,我们想将数组变回一个字符串。在这种情况下,Reduc是完美的。数组的reduce函数有3个参数,第一个是累加器,第二个是迭代元素,第三个是索引。由于数组索引基于0,因此要在5号之后插入,我们要查看索引i%5 === 4。


1
非常感谢您提供此代码。这是代码,基于您的代码,我用于每2个字符添加一个空格,用于输入电话号码(按键事件):~~~ $(this).val($(this).val()。replace(/ /g,"").split('').reduce((a,e,i)=> a + e +(i%2 ==== 1?'':)),'')。trim( )); ~~~
Mystral

3
var str="ABCDEFGHIJKLMNOPQR";
function formatStr(str, n) {
   var a = [], start=0;
   while(start<str.length) {
      a.push(str.slice(start, start+n));
      start+=n;
   }
   console.log(a.join(" "));
}
formatStr(str,3);

尝试解释您的答案
编码器

1
function addItemEvery (str, item, every){
  for(let i = 0; i < str.length; i++){
    if(!(i % (every + 1))){
      str = str.substring(0, i) + item + str.substring(i);
    }
   }
  return str.substring(1);
}

结果:

> addItemEvery("The quick brown fox jumps over the lazy dogs.", '$', 5)
> "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs."

0

我做了类似的事情来friendCode为移动应用程序分离a ,但是使用Arrayreduce

这将使用一个字符串,检查每个n字符并在该位置添加定界符。

/**
 * A function to easily inject characters every 'n' spaces
 * @param {string} friendCode The string we want to inject characters in
 * @param {*} numDigits Determines the 'n' spaces we want to inject at
 * @param {*} delimiter The character(s) we want to inject
 */
function formatFriendCode(friendCode, numDigits, delimiter) {
  return Array.from(friendCode).reduce((accum, cur, idx) => {
    return accum += (idx + 1) % numDigits === 0 ? cur + delimiter : cur;
  }, '')
}

formatFriendCode("000011112222", 4, ' ')
// output "0000 1111 2222 "

formatFriendCode("The quick brown fox jumps over the lazy dogs.", 5, '$')
// output "The q$uick $brown$ fox $jumps$ over$ the $lazy $dogs.$"

0

这是先前的答案之一,但是我将其包装在一个函数中,并且给了它一个“偏移”参数,而不是对其进行硬编码。

// https://stackoverflow.com/a/2712896/3480193
addCharToStringEveryXSpots(str, char, offset) {
    if ( ! char ) {
        return str;
    }
    
    let regExPattern = new RegExp('(.{' + offset + '})', 'g');
    
    return str.replace(regExPattern, '$1' + char);
};
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.