我們在工作中，經常會遇到把字符串切割成數組的情況，官方也為我們提供了 stringObject.split(separator,howmany) 方法，實例：

const str = '開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷' console.log(str.split(','))// 結果 // ['開心哈哈哈哈', '悲傷哈哈哈', '快樂哈哈哈', '是你', '開始', '開心', '悲傷']

但它只能以 某一個字符 進行分割，并且分割完之后，該字符（ split(‘開心’) 里的‘開心’ ）會被 的 ‘,’ 替換掉，不能保留原始的 字符串。

現在，我們有這樣一個需求，把 ‘開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷’ 這個字符串，按照 [’‘開心’, ‘悲傷’] 這兩個字符進行切分，并且得到的數組能夠完全保留原始字符串

// 輸入 const str = '開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷'// 處理 const result = splitFun(str)// 輸出 console.log(result) ['開心', '哈哈哈哈，', '悲傷', '哈哈哈，快樂哈哈哈，是你，開始，', '開心', '，', '悲傷']//最終我們再把 輸出的數組 渲染到頁面上，能夠得到 與原始字符串 完全相同的字符串// react: （result || []).map(item => <span>{item}</span>)// vue: <span v-for"item in result" :key="item">{{item}}</span>// 開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷

思路梳理：

1、 實現 字符串分割為數組 有很多方式：split, slice，正則表達式…等等方法，最簡單的還是采用 split 。
2、 雖然 split 一次只能以一個字符進行分割，但是我們通過 輪詢（for循環）的方式，多執行幾次，應該是可以達到效果：當我們 第一次把一個字符串 按照第一個字符 分割成為數組之后，還需要對數組里面的 每一項 按照第二個字符 進行分割, 以此類推 可以實現按照多個字符串進行分割。
3、 split 以某個字符 切割完之后，這個字符就被替換為 ‘，’ 了，要想保留原始字符，必須在每次 split 之后，將這個字符插入進去。

第一步：輪詢 分割字符 數組

// 為什么以數組的形式存放 該字符串：當我們 第一次把一個字符串 按照第一個字符 分割成為數組之后， // 還需要對數組里面的 每一項 按照第二個字符 進行分割，這是一個輪詢的過程， // 所以，一開始我們就以一個數組的形式去存放初始數組。 let array = ['開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷']const labels = ['開心', '悲傷']for(let i = 0; i < labels.length; i++) {// 分割字符串操作const twoArray = splitFunc(array, labels[i]) }

第二步：分割字符

const splitFunc = (array, label) => {// 定義 一個數組 去存放這一輪 最終被分割 好的數組const outArray = []// 循環 需要被分割的 數組字符串for(let i = 0; i < array.length; i++) {// 定義 一個數組 去存放 當前項 最終被分割 好的數組let newArr = []// 把 當前項 的字符串 按照 傳進來 字符進行分割const splitArr = array[i].split(label)// 得到分割好的數組后，將被 替換為 ‘，’ 的 label 追加進數組的相應位置// 例如： ‘開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷’， 以 ‘開心’ 分割// 被分割為 ["", "哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，", "，悲傷"]// , 每一項的末尾，就應該應該是 開心 二字，最后一項的末尾除外// 遍歷被分割好的數組for(let j = 0; j < splitArr.length; j++) {// 向被分割好的數組里 追加 label 字符newArr.push(splitArr[j])// 數組的末尾無需 追加if (j < splitArr.length -1) {newArr.push(label)}}// 把當前輪得到 的數組 推到 outArray 里去outArray.push(newArr)}// 返回 outArray ，注意 outArray 是一個二維數組return outArray }

第三步：輪詢調用 splitFunc 函數

for(let i = 0; i < labels.length; i++) {// 接收 當前輪 返回的 二維數組const twoArray = splitFunc(array, labels[i])// 將二維數組平鋪成為 一維數組const oneArray = twoArray.reduce(function (a, b) { return a.concat(b)} )// 過濾掉一維數組里的空字符串，并把它重新賦值給 array， // 下一輪循環將 切割 上一輪 已經被分割好的 數組array = oneArray.filter(item => item !== "")}// 最終循環結束的 array 就是被徹底分割好的數組

最終代碼：

const splitFunc = (array, label) => {const outArray = []for(let i = 0; i < array.length; i++) {let newArr = []const splitArr = array[i].split(label)console.log('splitArr', splitArr)for(let j = 0; j < splitArr.length; j++) {newArr.push(splitArr[j])if (j < splitArr.length -1) {newArr.push(label)}}outArray.push(newArr)}return outArray }let array = ['開心哈哈哈哈，悲傷哈哈哈，快樂哈哈哈，是你，開始，開心，悲傷']const labels = ['開心', '悲傷']for(let i = 0; i < labels.length; i++) {const twoArray = splitFunc(array, labels[i])const oneArray = twoArray.reduce(function (a, b) { return a.concat(b)} )array = oneArray.filter(item => item !== "")}console.log('array', array)

為什么需要如此麻煩的 將一個字符串 分割完成 之后，在組裝渲染到頁面上？

主要是為了 這些字符里的 關鍵字符（也就是 需要被分割的字符），在渲染的時候，能夠被我們所控制，為他設置CSS樣式，追加點擊事件等等，達到動態的效果，如果僅僅是一個字符串被渲染到頁面上，這些操作我們將無法控制。

如果以上算法邏輯有不足之處，歡迎大家指出教導👏👏。

總結

以上是生活随笔為你收集整理的把字符串按照某几个字符切割成数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。