React JS 中使用 props 传入的正则表达式匹配错误。
我想实现一个 React 组件，功能是通过 props 传入正则表达式，然后在 onChange 事件中通过匹配正则表达式来判断输入是否合法。
当我直接将正则表达式传入时，会出现匹配错误的情况
var RegexTextField = React.createClass({
handleChange: function (e) {
var patt = this.props.regex; // 这里直接获取正则表达式
var val = e.target.value;
console.log('----------');
console.log('正则：' + patt + ' 输入值：' + val);
console.log('匹配结果：' + patt.test(val));
},
render: function() {
return (
<input type="text" regex={this.props.regex} onChange={this.handleChange} />
);
}
});
React.render(
<RegexTextField regex={/\d/g} />, // 传入正则表达式
document.getElementById('regex-text-field')
);
// 测试结果
正则：/\d/g 输入值：a1
匹配结果：true
----------
正则：/\d/g 输入值：a1a
匹配结果：false
----------
正则：/\d/g 输入值：a1aa
匹配结果：true
----------
正则：/\d/g 输入值：a1aaa
匹配结果：false
规律为数字在第几位第几次触发 onchange 事件才会成功
如果我通过传正则字符串再转换成正则对象就没有这个问题
var RegexTextField = React.createClass({
handleChange: function (e) {
var patt = RegExp(this.props.regex, 'g'); // 这里转换正则对象
var val = e.target.value;
console.log('----------');
console.log('正则：' + patt + ' 输入值：' + val);
console.log('匹配结果：' + patt.test(val));
},
render: function() {
return (
<input type="text" regex={this.props.regex} onChange={this.handleChange} />
);
}
});
React.render(
<RegexTextField regex="[\d]" />, // 传入正则字符串
document.getElementById('regex-text-field')
);
// 测试结果
---------- Inline JSX script:203
正则：/[\d]/g 输入值：a
匹配结果：false
----------
正则：/[\d]/g 输入值：a1
匹配结果：true
----------
正则：/[\d]/g 输入值：a1a
匹配结果：true
----------
正则：/[\d]/g 输入值：a1aa
匹配结果：true
请问是我哪里写的不正确导致这个现象吗？
霜月火腿肠
10 years, 1 month ago
Answers
哈哈，出现这么个问题不能怪别人，只能怪你手贱，开启了JavaScript正则的global模式。
你仔细比较你的两种写法，除了正则表达式不同外，最主要的不同就是，第一种
var patt = this.props.regex;
始终指向同一个
RegExp
对象，
而第二种
var patt = RegExp(this.props.regex, 'g');
,则每次都会new一个新的
RegExp
对象。
二者有何不同呢？
----------------------偏知识分割线----------------------
在开启了global的情况下,
RegExp
对象会记录上次匹配的索引位置
lastIndex
，再次进行test的时候，会从上次匹配到的记录继续向下匹配。
----------------------偏知识分割线----------------------
所以，规律不是你发现的“数字在第几位第几次触发 onchange 事件才会成功”，而是val中以数字出现的次数为循环周期。具体情况，你可以在测试代码里加上
var patt = this.props.regex; // 这里直接获取正则表达式
var val = e.target.value;
console.log('----------');
console.log('正则：' + patt + ' 输入值：' + val);
console.log(patt.lastIndex);
console.log('匹配结果：' + patt.test(val));
应该就可以看明白了，不怪你，也不怪React，这个知识点确实比较偏。看明白了，记得点赞哦，(*^__^*) 嘻嘻..
侵食ドルチェ
answered 10 years, 1 month ago