如何在 JavaScript 中將長字串分割成 n 個大小的塊？

字串是由一個或多個字元組成的序列，其中包含數字、字母、符號或特殊字元。在 JavaScript 中，字串是不可變的。也就是說，一旦建立了一個字串，就不能更改其值。

例如，考慮以下程式碼片段，我們在這裡建立了一個字串變數併為其分配了一個值（Tutorialspoint）。在下一條語句中，我們嘗試更改字串第一個索引處的字元。然後我們顯示字串的內容。

let x = 'Tutorialspoint';  
x[0] = 't';  
console.log(x); //Tutorialspoint.

執行此程式碼將顯示字串“Tutorialspoint”，即原始字串的值沒有改變。

但是，您可以為現有字串分配新值 -

let y = 'Tutorialspoint';  
y = 'tutorialspoint';  
cosole.log(y); //tutorialspoint.

將長字串分割成塊

我們需要將一個字串分割成 n 個大小的塊，這意味著我們需要將一個長字串分割成 n 個大小的子字串。

例如，考慮字串“helloworld”，如果 n 的值為 2，則輸出將為“he”、“ll”、“ow”、“or”、“ld”。

讓我們看看一些輸入和輸出場景 -

讓我們考慮一個場景，我們有一個字串，並且我們正在將字串以 2 個字元的長度進行分割。

Input = 'Tutorialspoint' 
Output = 'Tu', 'to', 'ri', 'al', 'sp', 'oi', 'nt'

讓我們假設另一種場景，輸入字串中字元之間的空格在某些情況下也將被計算在內。

Input = 'Hello my movie is RRR' 
Output = 'He', 'll', 'o ', 'my', ' m', 'ov', 'ie', ' i', 's ', 'RR', 'R'

在 JavaScript 中，我們有很多方法可以將長字串分割成 n 個大小的塊。讓我們看看下面的示例。

split() 方法

JavaScript 中的split()方法將字串分割成一個（子）字串陣列。此方法將在一個新陣列中返回輸出，並且不會修改原始字串。

分割單詞

在下面的示例中，我們有一個包含一些字元的輸入字串。我們執行了split(" ")方法，它將透過分割每個單詞來返回字串。

<html> 
<body> 
   <button onClick = "split()"> Click </button> 
   <h4 id = "output"></h4> 
   <script> 
   function split() { 
      var string = "Hello my name is hrithik roshan"; 
      const newArray = string.split(" "); 
      document.getElementById("output").innerHTML = newArray;  
   }; 
   </script> 
</body> 
</html>

正如我們在上面輸出中看到的，字串被分割成了各個單詞。

N 個塊的單詞

現在，下面的程式將給定的輸入字串分割成 n 個大小的塊。

<html> 
<body> 
   <script> 
      var v = []; 
      var str = "Hello my name is hrithik roshan" 
      var t = str.split("");
      for (var i = 0; i < t.length; i++) { 
         if ((i % 3) == 2) { 
            v.push(t[i - 2].concat(t[i - 1], t[i])); 
         } 
      } 
      document.write(v); 
   </script> 
</body> 
</html>

示例 2

分割字元，包括空格

在下面的示例中，我們有一個包含字元的輸入字串。透過使用split("")方法，字串將按每個字元進行分割。空格也將作為單個字元進行計數。

<html> 
<body> 
   <button onClick = "split()">Click</button> 
   <h4 id = "output"></h4> 
   <script> 
   function split() { 
      var string = "Hello my name is Allu Arjun"; 
      const newArray = string.split(""); 
      document.getElementById("output").innerHTML = newArray;  
   }; 
   </script> 
</body> 
</html>

在輸出中，字串被分割成了各個字元。

示例 3

使用 limit 引數分割

在下面的示例中，我們有一個包含一些字元的輸入字串。我們執行了包含 limit 引數的分割操作。由於我們在 limit 引數中輸入了 3，這將返回輸入字串中的三個單詞。

<html> 
<body> 
   <button onClick = "split()"> Click</button> 
   <h4 id = "output"></h4> 
   <script> 
      function split() { 
         var string = "Winner is Neeraj chopra"; 
         const newArray = string.split(" ", 3); 
         document.getElementById("output").innerHTML = newArray;  
      }; 
   </script> 
</body> 
</html>

由於我們在 split() 方法中傳遞了 3，因此字串將被分割成 3 個單詞。

Regex() 方法

要使用正則表示式分割字串，regex 方法有一個引數用於包含要分割給定輸入字串的大小。

語法

如果我們想獲取任何字串的極端 n 個大小的子字串，則語法如下：

str.match(/.{1,n}/g); // Enter size of substring in 'n'

如果字串包含換行符或回車符，則語法如下：

str.match(/(.|[\r
]){1,n}/g); // Enter size of substring in 'n'

示例

在下面的示例中，我們檢查了輸入字串是否為空。如果輸入字串大於 0，我們執行了 regex 方法並提供了分割字串的大小。此方法還將計算字元之間的空格。

<!DOCTYPE html> 
<html> 
<head> 
   <button onClick = "regex()">Click me! </button> 
   <p id = "para"> </p> 
   <p id = "para1"> </p> 
   <p id = "para2"> </p> 
   <script> 
      function regex(){ 
         stringsplit = function(str, size) { 
            while (str == null) 
               return []; 
               str = String(str); 
               return size > 0 ? str.match(new RegExp('.{1,' + size + '}', 'g')) : [str]; 
         }  
         document.getElementById("para").innerHTML = stringsplit('You are in Hyderabad') + "<br>";  
         document.getElementById("para1").innerHTML = stringsplit('Jaipur is a pink city',3) + "<br>";  
         document.getElementById("para2").innerHTML = stringsplit('Vizag is city of destiny',4); 
      }; 
   </script> 
</head> 
</html>

更新於：2022-09-23

3K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告