regex 如何在React中删除开头和结尾处白色空格

vjhs03f7  于 2023-10-22  发布在  React
关注(0)|答案(5)|浏览(125)

我不想在输入之前和输入之后有任何空格,比如“文本”和“文本“不允许,所以我替换白色,但是当我们从记事本复制“文本“并粘贴到输入上时,想要删除空格,它会抛出错误,比如“无法读取未定义的阅读目标的属性”。

const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onChange={(e)=>{formik.handleChange(e);handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>
brjng4g3

brjng4g31#

使用正则表达式,下面的应该可以工作,你可以在regex101上测试它:

e.target.value = e.target.value.replace(/^[ \t]+|[ \t]+$/gm, "");

sojin建议的更清洁的解决方案

e.target.value = e.target.value.trim()
ccrfmcuu

ccrfmcuu2#

取代

const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

与此

const handleChangeWhiteSpace = (e) => {
      e.target.value = e.clipboardData.getData('Text').trim();
  };

要在文本字段中粘贴文本时注册更改,请使用onPaste事件

onPaste={handleChangeWhiteSpace}

最终代码

const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
      e.target.value = e.target.value.trim();
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onPaste={handleChangeWhiteSpace}
                          onChange={(e)=>{formik.handleChange(e);
                          handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>
jq6vz3qz

jq6vz3qz3#

use**normalize={(value,valueVal,valueVals)=> value.trimStart()}**after rules{[]} in form.item
用于防止antd输入值前的空白
例如,检查图像中的选定代码==> enter image description here

yzckvree

yzckvree4#

要不允许只发送空格,您可以使用normalizeprop

<MyInput
   type="text" style={{width:'240px'}}
   normalize={(value) => value.trimStart()}
   error={formik.errors.input && formik.touched.input}
   value={formik.values.input}

然后你可以删除这个函数中的所有空格

const onFinish = (values) => {
 //values.input1=values.input1.trim() or whatever
}

顺便说一下,这个函数可以用来删除所有的空格

const remove = (str) => str.trim().replace(/\s\s+/g, ' ')
i2byvkas

i2byvkas5#

我们可以使用trimStart()和trimEnd()来删除开头和结尾处白色。

e.target.value = e.target.value.trimStart().trimEnd();

相关问题