textarea 字符串值多行数据分割处理

在业务中有需要这样的场景:将textarea标签中按照每一行用户输入的数据格式化成一个表格数据

如下图所所示：

分析问题：

• 获取分割的每一行数据，需要判断【换行符】
• 用string的方法或者正则消除空格对获取正确数据的影响

解决问题：

• 【换行符】 用字符的ascii码的值来判断，代表换行的 回车，换行 的ascii值分别为13,10
• 用string的trim方法消除首尾多余空格,/\s+/匹配有效数据数据之间的空格做相应的处理

代码实例：

    // var sourceValue = $('[name="sourceValue"]').val().trim() // 获取textarea值
    var sourceValue = ` 1 2           3 
    2      4         5   
    5 6   6
    66666             6      6           `; // 测试数据
    var splitArray = [] // 保存分割的字符串
    var lastIndex = -1 // 记录上一次访问到换行符的位置
    for (var i = 0, l = sourceValue.length ; i < l  ; i++) {
      if ([10, 13].indexOf(sourceValue[i].charCodeAt()) != -1) { // 根据换行符的 ascii push
          splitArray.push(sourceValue.substring(lastIndex + 1, i).trim()) // 将这部分的值进行首尾空格消除
          lastIndex = i
      } 
    }

    if ( sourceValue.substr(lastIndex)) { // 最后一行数据后面没有换行符的情况下，处理最后一行数据
      splitArray.push(sourceValue.substr(lastIndex).trim()) // 进行首尾空格消除
    }
    splitArray.forEach(function (str) {
      var item = str.split(/\s+/) // 匹配有效数据之间的空格
      console.log(item)
    })
复制代码

测试结果：

转载于:https://juejin.im/post/5bc3f4336fb9a05d122832a2