时间戳

首页 > 解决方案 > React - 通过逗号解析用户输入的值并删除 CR/LF 和空格

javascript - React - 通过逗号解析用户输入的值并删除 CR/LF 和空格

问题描述

我有一个<TextArea>输入，允许用户输入一个逗号分隔的列表，然后解析每个,. 我正在使用基本.split()方法执行此操作。这显然没有涵盖很多场景。我还需要考虑 CR / LF 字符（换行符等）以及前导和尾随空格。

在我的例子中也是一个案例；如果值已经被它们包围，我不想添加另一组双引号。即“4456”、“54456”将被视为“4456”、“54456”。

我解析输入值的函数如下所示：

  addSelectorValue = e => {
    e.stopPropagation();
    e.preventDefault();
    this.setState(
      ({ selectorValues, selectorValue }) => ({
        selectorValues: [...selectorValues, ...selectorValue.split(",")],
        selectorValue: ""
      }),
      () => {
        console.log("Array of selectorValues: ", this.state.selectorValues);
      }
    );
  };

是否有特定的库或最佳实践（如正则表达式）来实现上述情况？

我有一个沙箱在这里展示我的用例。如果您在输入几个值或用 包裹的值后按下表单上的提交按钮" "，您可以看到正在提交的换行符。

标签： javascriptreactjs

解决方案

你可以：

  1. /\r?\n|\r/g通过将所有匹配项替换为空字符串来删除所有新行。
  2. split将字符串添加到带有,分隔符的数组中。
  3. trim每个子串。
  4. 删除每个子字符串上的"周围。.replace(/^"(.*)"$/, "$1")
addSelectorValue = e => {
  e.stopPropagation();
  e.preventDefault();
  this.setState(({ selectorValues, selectorValue }) => ({
    selectorValues: [
      ...selectorValues,
      ...selectorValue
        .replace(/\r?\n|\r/g, "")
        .split(",")
        .map(str => str.trim().replace(/^"(.*)"$/, "$1"))
    ],
    selectorValue: ""
  }));
};

推荐阅读