如何从正则表达式中排除最后一个空格？答案

【问题标题】：How to exclude last space from regex?如何从正则表达式中排除最后一个空格？
【发布时间】：2021-08-31 07:15:56
【问题描述】：

我的反应组件中有输入框

const {Component} = React;

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: "",
        };
    }

    restrictSpecialCharacters = (e) => {
        const nospecial = /^[A-Za-z0-9]+$/;
        const textValue = e.target.value;
        if (textValue.match(nospecial)) {
            this.setState({ searchText: textValue })
        }
    };

    render() {
        return <input
            type="text"
            className="form-control form-control-lg material-textfield-input"
            name="carrierACNumber"
            value={this.state.searchText}
            onChange={(e) => this.restrictSpecialCharacters(e) }
            required
        />;
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

它按预期工作，但是当我尝试在按退格键时删除最后一个字符时，它不会删除它。如何制作删除最后一个字符的正则表达式？

【问题讨论】：

我不明白为什么上面的代码会这样做。请使用可运行的minimal reproducible example 更新您的问题，使用 Stack Snippets（[<>] 工具栏按钮）演示问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
我已经为你添加了它，做了几个合理的假设。
我正试图这样做，但你为我做到了...谢谢！！！
可能值得将此问题的标题更改为更具体和更清晰的内容，也许是“如何让我的正则表达式匹配任意数量的字符，包括空字符串”虽然我相信你可以想出一个比这更好的标题。

标签： javascript reactjs regex

【解决方案1】：

它不允许您删除最后一个字符的原因是因为您的正则表达式中的 + 表示“一个或多个”，它不允许出现 0 个字符；它不再匹配正则表达式。

如果您将正则表达式更改为 /^[A-Za-z0-9]*$/ 应该可以解决您的问题，因为 * 是 0 或更多：

const {Component} = React;

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: "",
        };
    }

    restrictSpecialCharacters = (e) => {
        const nospecial = /^[A-Za-z0-9]*$/;
        const textValue = e.target.value;
        if (textValue.match(nospecial)) {
            this.setState({ searchText: textValue })
        }
    };

    render() {
        return <input
            type="text"
            className="form-control form-control-lg material-textfield-input"
            name="carrierACNumber"
            value={this.state.searchText}
            onChange={(e) => this.restrictSpecialCharacters(e) }
            required
        />;
    }
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

【讨论】：

啊！这只是最后一个字符。明白了——观察得很好！