Javascript优雅的方式将字符串拆分成n个字符长

时间:2011-06-07 00:25:55

标签: javascript arrays string split

正如标题所说,我有一个字符串,我想分成长 n 个字符。

例如:

var str = 'abcdefghijkl';
经过n = 3的一些魔法后,将成为

var arr = ['abc','def','ghi','jkl'];

有优雅的方法吗?

14 个答案:

答案 0 :(得分:295)

var str = 'abcdefghijkl';
console.log(str.match(/.{1,3}/g));

注意:使用{1,3}代替{3}来包含不是3的倍数的字符串长度的余数,例如:

console.log("abcd".match(/.{1,3}/g)); // ["abc", "d"]


更多细微之处:

  1. 如果您的字符串可能包含换行符(您希望将其视为字符而不是拆分字符串),则.将不会捕获这些换行符。请改用/[\s\S]{1,3}/。 (谢谢@Mike)。
  2. 如果您的字符串为空,那么当您可能需要空数组时,match()将返回null。通过附加|| []
  3. 来防止这种情况发生

    所以你最终会得到:

    var str = 'abcdef \t\r\nghijkl';
    var parts = str.match(/[\s\S]{1,3}/g) || [];
    console.log(parts);
    
    console.log(''.match(/[\s\S]{1,3}/g) || []);

答案 1 :(得分:35)

如果您不想使用正则表达式...

var chunks = [];

for (var i = 0, charsLength = str.length; i < charsLength; i += 3) {
    chunks.push(str.substring(i, i + 3));
}

jsFiddle

...否则正则表达式解决方案非常好:)

答案 2 :(得分:19)

str.match(/.{3}/g); // => ['abc', 'def', 'ghi', 'jkl']

答案 3 :(得分:8)

以此问题的先前答案为基础;以下函数将拆分字符串(str)n个数字(size)。

function chunk(str, size) {
    return str.match(new RegExp('.{1,' + size + '}', 'g'));
}

演示

(function() {
  function chunk(str, size) {
    return str.match(new RegExp('.{1,' + size + '}', 'g'));
  }
  
  var str = 'HELLO WORLD';
  println('Simple binary representation:');
  println(chunk(textToBin(str), 8).join('\n'));
  println('\nNow for something crazy:');
  println(chunk(textToHex(str, 4), 8).map(function(h) { return '0x' + h }).join('  '));
  
  // Utiliy functions, you can ignore these.
  function textToBin(text) { return textToBase(text, 2, 8); }
  function textToHex(t, w) { return pad(textToBase(t,16,2), roundUp(t.length, w)*2, '00'); }
  function pad(val, len, chr) { return (repeat(chr, len) + val).slice(-len); }
  function print(text) { document.getElementById('out').innerHTML += (text || ''); }
  function println(text) { print((text || '') + '\n'); }
  function repeat(chr, n) { return new Array(n + 1).join(chr); }
  function textToBase(text, radix, n) {
    return text.split('').reduce(function(result, chr) {
      return result + pad(chr.charCodeAt(0).toString(radix), n, '0');
    }, '');
  }
  function roundUp(numToRound, multiple) { 
    if (multiple === 0) return numToRound;
    var remainder = numToRound % multiple;
    return remainder === 0 ? numToRound : numToRound + multiple - remainder;
  }
}());
#out {
  white-space: pre;
  font-size: 0.8em;
}
<div id="out"></div>

答案 4 :(得分:1)

function chunk(er){
return er.match(/.{1,75}/g).join('\n');
}

以上功能是我用于Base64分块的功能。它将创建一个75个字符的换行符。

答案 5 :(得分:1)

我的解决方案(ES6语法):

const source = "8d7f66a9273fc766cd66d1d";
const target = [];
for (
    const array = Array.from(source);
    array.length;
    target.push(array.splice(0,2).join(''), 2));

我们甚至可以创建一个函数:

function splitStringBySegmentLength(source, segmentLength) {
    if (!segmentLength || segmentLength < 1) throw Error('Segment length must be defined and greater than/equal to 1');
    const target = [];
    for (
        const array = Array.from(source);
        array.length;
        target.push(array.splice(0,segmentLength).join('')));
    return target;
}

然后您可以以可重复使用的方式轻松调用该函数:

const source = "8d7f66a9273fc766cd66d1d";
const target = splitStringBySegmentLength(source, 2);

干杯

答案 6 :(得分:1)

const chunkStr = (str, n, acc) => {     
    if (str.length === 0) {
        return acc
    } else {
        acc.push(str.substring(0, n));
        return chunkStr(str.substring(n), n, acc);
    }
}
const str = 'abcdefghijkl';
const splittedString = chunkStr(str, 3, []);

没有REGEX的清洁溶液

答案 7 :(得分:0)

一些不使用正则表达式的干净解决方案:

/**
* Create array with maximum chunk length = maxPartSize
* It work safe also for shorter strings than part size
**/
function convertStringToArray(str, maxPartSize){

  const chunkArr = [];
  let leftStr = str;
  do {

    chunkArr.push(leftStr.substring(0, maxPartSize));
    leftStr = leftStr.substring(maxPartSize, leftStr.length);

  } while (leftStr.length > 0);

  return chunkArr;
};

用法示例 - https://jsfiddle.net/maciejsikora/b6xppj4q/

我还尝试将我的解决方案与正确答案的正则表达式进行比较。可以在jsfiddle上找到一些测试 - https://jsfiddle.net/maciejsikora/2envahrk/。测试显示两种方法都有相似的性能,也许在第一次看regexp解决方案稍快一点,但是自己判断它。

答案 8 :(得分:0)

在这里,我们每隔n个字符散布一个字符串和另一个字符串:

export const intersperseString = (n: number, intersperseWith: string, str: string): string => {

  let ret = str.slice(0,n), remaining = str;

  while (remaining) {
    let v = remaining.slice(0, n);
    remaining = remaining.slice(v.length);
    ret += intersperseWith + v;
  }

  return ret;

};

如果我们像这样使用上述内容:

console.log(splitString(3,'|', 'aagaegeage'));

我们得到:

  

aag | aag | aeg | eag | e

在这里,我们也做同样的事情,但要推送到数组:

export const sperseString = (n: number, str: string): Array<string> => {

  let ret = [], remaining = str;

  while (remaining) {
    let v = remaining.slice(0, n);
    remaining = remaining.slice(v.length);
    ret.push(v);
  }

  return ret;

};

然后运行它:

console.log(sperseString(5, 'foobarbaztruck'));

我们得到:

  

['fooba','rbazt','ruck']

如果有人知道一种简化上述代码的方法,即lmk,但它对于字符串来说应该可以正常工作。

答案 9 :(得分:0)

使用.split

var arr = str.split( /(?<=^(?:.{3})+)(?!$)/ )  // [ 'abc', 'def', 'ghi', 'jkl' ]

.replace将是:

var replaced = str.replace( /(?<=^(.{3})+)(?!$)/g, ' || ' )  // 'abc || def || ghi || jkl'



/(?!$)/要在结束/$/之前停止,而没有:

var arr      = str.split( /(?<=^(?:.{3})+)/ )        // [ 'abc', 'def', 'ghi', 'jkl' ]     // I don't know why is not [ 'abc', 'def', 'ghi', 'jkl' , '' ], comment?
var replaced = str.replace( /(?<=^(.{3})+)/g, ' || ')  // 'abc || def || ghi || jkl || '

/(?:中无需忽略组)/ ... .replace,但在.split中将组添加到arr:

var arr = str.split( /(?<=^(.{3})+)(?!$)/ )  // [ 'abc', 'abc', 'def', 'abc', 'ghi', 'abc', 'jkl' ]

答案 10 :(得分:0)

这是一种无需正则表达式或显式循环的方法,尽管它稍微扩展了一个线性的定义:

const input = 'abcdefghijlkm';

// Change `3` to the desired split length.
const output = input.split('').reduce((s, c) => {let l = s.length-1; (s[l] && s[l].length < 3) ? s[l] += c : s.push(c); return s;}, []);

console.log(output);  // output: [ 'abc', 'def', 'ghi', 'jlk', 'm' ]

它的工作原理是将字符串分成单个字符数组,然后使用Array.reduce遍历每个字符。通常reduce将返回一个值,但是在这种情况下,该值恰好是一个数组,当我们传递每个字符时,会将其附加到该数组的最后一项。数组中的最后一项达到目标长度后,我们将添加一个新的数组项。

答案 11 :(得分:0)

稍后再讨论,但这是一种变体,它比substring + array push one快一点。

// substring + array push + end precalc
var chunks = [];

for (var i = 0, e = 3, charsLength = str.length; i < charsLength; i += 3, e += 3) {
    chunks.push(str.substring(i, e));
}

作为for循环的一部分,预先计算结束值比在子字符串内进行内联数学更快。我已经在Firefox和Chrome中对其进行了测试,它们都显示出加速。

您可以尝试here

答案 12 :(得分:0)

    var b1 = ""; 
    function myFunction(n) { 
    if(str.length>=3){
     var a = str.substring(0,n);
     b1 += a+ "\n"
     str = str.substring(n,str.length)
     myFunction(n) 
    } 
    else{ 
    if(str.length>0){
    b1 += str 
    } 
    console.log(b1)
     } 
    }
  myFunction(4)

答案 13 :(得分:0)

试试这个简单的代码,它会像魔术一样工作!

let letters = "abcabcabcabcabc";
// we defined our variable or the name whatever
let a = -3;
let finalArray = [];
for (let i = 0; i <= letters.length; i += 3) {
    finalArray.push(letters.slice(a, i));
  a += 3;
}
// we did the shift method cause the first element in the array will be just a string "" so we removed it
finalArray.shift();
// here the final result
console.log(finalArray);