复制粘贴到textarea,根据空格划分为表格列,\n划分为表格行

需求:
1:textarea框里输入内容,根据内容自动生成表格table;
2:规定,根据输入的内容,按空格划分表格列,\n划分表格行;
3:表格第3列,内容可能是“待定”和“暂无”,如果不是这两个第3列的内容不允许重复;

handleCopy = (e) => {
        let value = e.target.value; 
        //用来渲染table用的copyArr 
        let copyArr = [];
        
        //根据\n换行
        let rows =  value.split("\n"); 
        rows.forEach(function (item, index) {
        
        	//根据空格换列
            if (item.replace(/\s*/g, "") == "") {
                return;
            }
            let column = item.split(/\s+/);
            copyArr.push(column);
        })
        this.setState({data:copyArr})
        // 如果只是划分行划分列,到此数据应该就可以用了




        //渲染完成,开始判断,判断需求有些复杂,自己整理过后看着依旧复杂。。。 记录下吧,防止以后找不到 
        this.handleJugement(rows)
}
    
    // 当复制成功时,需要判断条件是否满足可以导入的情况
    handleJugement = (rows) => {
        const { dispatch } = this.props;
        //存储代码数组,此数组过滤掉为“待定”情况,需要传到服务器判断是否有重复添加的代码
        let bondCodeArr = [];
        //把所有代码放一个数组中,判断是否有相等的,除了”待定“,为了精准到哪一行所以需要把所有的代码整合到一起
        let bondCodeRepeatArr = [];
        //去除所有行中,字符串中所有空格,为了对比数组中两个对象是否完全相等,完全相等不允许添加
        let bondBependingRepeatArr = [];
        for (let i = 0; i < rows.length; i++) {
            if (rows[i].replace(/\s*/g, "") == "") {
                continue;
            }
            let pattern = new RegExp("[`~!@#^&\\?~!@#&]");
            // let dateregExp = /\b\d{4}\d{1,2}\d{1,2}\b/;
            let column = rows[i].split(/\s+/);
            if (column[0].replace(/\s*/g, "") == "") {
                message.error("第" + (i + 1) + "行第一格不能为空格,请确认后重新导入");
                this.setState({ isFalseData: true })
                return false;
            }
            if (column[2] != "待定") {
                bondCodeArr.push(column[2])
            }
            bondCodeRepeatArr.push(column[2]);
            bondBependingRepeatArr.push(rows[i].replace(/\s*/g, ""))
            //判断三个时间是否格式正确
            // if (!dateregExp.test(column[0]) || !dateregExp.test(column[1]) || !dateregExp.test(column[7])) {
            //     message.error("第" + (i + 1) + "行簿记日期、缴款日、簿记时间日期格式为“YYYYMMDD”,请确认后重新导入");
            //     this.setState({ isFalseData: true })
            //     return false;
            // }
            //需要判断长度是否足够或者超过,需要判断两个数组的数据不能完全一致,期限,规模,利率区间不能有特殊字符
            if (column.length > 20) {
                if (column[20].trim() !== "") {
                    message.error("第" + (i + 1) + "行数据超出预期,请确认后重新导入");
                    this.setState({ isFalseData: true })
                    return false;
                }
            }
            if (column.length < 20 || column[19].trim() == "") {
                message.error("第" + (i + 1) + "行数据不完整,请确认后重新导入")
                this.setState({ isFalseData: true })
                return false;
            }
            if (pattern.test(column[8]) || pattern.test(column[9]) || pattern.test(column[13])) {
                message.error("第" + (i + 1) + "行期限、规模、利率区间不能带有特殊字符,请确认后重新导入")
                this.setState({ isFalseData: true })
                return false;
            }
            else {
                this.setState({ isFalseData: false })
            }
        }
        /**
         * 去除字符串中所有空格之后如果还想等则提示有重复数据
         */
        if (this.isRepeat(bondCodeRepeatArr, '代码有重复项')) {
            return false;
        }
        if (this.isRepeat(bondBependingRepeatArr, '内容全部重复')) {
            return false;
        }

        //调接口判断是否跟数据库中的代码有重复,当这次修改并没有改动到代码时,则无需再次去掉接口
        if (bondCodeArr.join('').trim() != this.state.bondCodeArrCompare.join('').trim()) {
            dispatch({
                type: 'newsinfo/searchRepeatBond',
                payload: {
                    "bondCode": bondCodeArr.join(','),
                },
                callback: res => {
                    if (res.resultCode == "200") {
                        if (res.resultMsg.length > 0) {
                            let str = res.resultMsg + '代码有重复,请确认后重新导入'
                            message.error(str)
                            this.setState({ isFalseData: true, isRepeatBondcode: true, repeatStr: str })
                            return false;
                        } else {
                            this.setState({ isFalseData: false, isRepeatBondcode: false, repeatStr: '' })
                        }
                    }
                }
            })
            this.setState({
                bondCodeArrCompare: bondCodeArr
            })
        } else {
            if (this.state.isRepeatBondcode) {
                message.error(this.state.repeatStr)
                this.setState({ isFalseData: true })
                return false;
            }
        }
    }

    // 判断数组间的两个元素是否相等
    isRepeat = (arr, str) => {
        let hash = {};
        for (let i in arr) {
            if (hash[arr[i]]) {
                if (arr[i] != "暂无" && arr[i] != "待定") {
                    message.error("第" + (Number(i) + 1) + `行${str},请确认后重新导入`);
                    this.setState({ isFalseData: true })
                    return true;
                }
            }
            hash[arr[i]] = true;
        }
        return false;
    }

render(){
	return (
	<Table loading={loading} bordered dataSource={data} rowKey={e => Math.random()} scroll={{ x: true }} pagination={false} size="middle" columns={columns} />
	)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
textarea输入中,如果想要保留输入的空格,可以使用以下方法。首先,通过在textarea标签中设置样式属性white-space: pre-wrap;来保留所有空格。例如:<textarea style="white-space: pre-wrap;"></textarea>。此样式属性将保留所有空格,使其在回显时能够正确显示。 另外,如果想要去除textarea中的多余空格和回车,可以使用以下方法。可以在回显时使用JavaScript的replace()方法,将换符替换为<br>标签,并将空格替换为&nbsp;实体码。例如,可以使用以下代码:<div v-html="form.desc.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"></div>。这样可以保持输入内容和回显的内容一致。 总结起来,如果想要在textarea中保留输入的空格,可以使用样式属性white-space: pre-wrap;,如果想要去除textarea中的多余空格和回车,可以使用JavaScript的replace()方法进替换。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue.js 回显textarea入的空格和换](https://blog.csdn.net/weixin_47978760/article/details/127995006)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [textarea去除多余空格和回车的方法及其属性](https://download.csdn.net/download/weixin_38663036/14045425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值