Javascript 将用户输入字符串转换为正则表达式

Javascript 将用户输入字符串转换为正则表达式,javascript,html,regex,Javascript,Html,Regex,我正在用HTML和JavaScript设计一个正则表达式测试程序。用户将输入一个正则表达式、一个字符串,并通过单选按钮选择要测试的函数(例如搜索、匹配、替换等),程序将在使用指定参数运行该函数时显示结果。自然会有额外的文本框来替换额外的参数等等 我的问题是从用户那里获取字符串并将其转换为正则表达式。如果我说他们不需要在他们输入的正则表达式周围有/,那么他们就不能设置标志,比如g和I。所以他们必须在表达式周围有/,但是我如何才能将该字符串转换为正则表达式呢?它不能是文本,因为它是一个字符串,我不能

我正在用HTML和JavaScript设计一个正则表达式测试程序。用户将输入一个正则表达式、一个字符串,并通过单选按钮选择要测试的函数(例如搜索、匹配、替换等),程序将在使用指定参数运行该函数时显示结果。自然会有额外的文本框来替换额外的参数等等

我的问题是从用户那里获取字符串并将其转换为正则表达式。如果我说他们不需要在他们输入的正则表达式周围有
/
,那么他们就不能设置标志,比如
g
I
。所以他们必须在表达式周围有
/
,但是我如何才能将该字符串转换为正则表达式呢?它不能是文本,因为它是一个字符串,我不能将它传递给RegExp构造函数,因为它不是一个没有
/
的字符串。有没有其他方法可以让用户输入字符串进入正则表达式?我是否必须用
/
解析正则表达式的字符串和标志,然后用另一种方式构造它?我应该让他们输入一个字符串,然后分别输入标志吗

使用

您可以将标志作为第二个字符串参数传递给构造函数。有关详细信息,请参阅文档。

使用

您可以将标志作为第二个字符串参数传递给构造函数。有关详细信息,请参阅文档。

使用从字符串创建正则表达式:

var re = new RegExp("a|b", "i");
// same as
var re = /a|b/i;
使用从字符串创建正则表达式:

var re = new RegExp("a|b", "i");
// same as
var re = /a|b/i;

我建议您也为特殊标志添加单独的复选框或文本字段。这样,用户就不需要添加任何
/
。如果是替换,请提供两个文本字段。这会让你的生活轻松很多


为什么??因为否则,一些用户将添加
/
,而其他用户则不会。有些会出现语法错误。然后,在去掉
/
之后,您可能会得到一个语法有效的正则表达式,它与用户的意图完全不同,导致奇怪的行为(从用户的角度来看)。

我建议您还为特殊标志添加单独的复选框或文本字段。这样,用户就不需要添加任何
/
。如果是替换,请提供两个文本字段。这会让你的生活轻松很多


为什么??因为否则,一些用户将添加
/
,而其他用户则不会。有些会出现语法错误。然后,在去掉
/
之后,您可能会得到一个语法有效的正则表达式,它与用户的意图完全不同,导致奇怪的行为(从用户的角度来看)。

您可以使用复选框请求标志,然后执行以下操作:

var userInput = formInput;
var flags = '';
if(formGlobalCheckboxChecked) flags += 'g';
if(formCaseICheckboxChecked) flags += 'i';
var reg = new RegExp(userInput, flags);

您可以使用复选框请求标志,然后执行以下操作:

var userInput = formInput;
var flags = '';
if(formGlobalCheckboxChecked) flags += 'g';
if(formCaseICheckboxChecked) flags += 'i';
var reg = new RegExp(userInput, flags);


在我的例子中,用户输入有时被分隔符舍入,有时不舍入。因此,我又增加了一个案例

var regParts = inputstring.match(/^\/(.*?)\/([gim]*)$/);
if (regParts) {
    // the parsed pattern had delimiters and modifiers. handle them. 
    var regexp = new RegExp(regParts[1], regParts[2]);
} else {
    // we got pattern string without delimiters
    var regexp = new RegExp(inputstring);
}

在我的例子中,用户输入有时被分隔符舍入,有时不舍入。因此,我又增加了一个案例

var regParts = inputstring.match(/^\/(.*?)\/([gim]*)$/);
if (regParts) {
    // the parsed pattern had delimiters and modifiers. handle them. 
    var regexp = new RegExp(regParts[1], regParts[2]);
} else {
    // we got pattern string without delimiters
    var regexp = new RegExp(inputstring);
}

多亏了前面的回答,这个模块可以作为将可配置字符串应用到正则表达式中的通用解决方案。。用于过滤文本:

var permittedChars = '^a-z0-9 _,.?!@+<>';
permittedChars = '[' + permittedChars + ']';

var flags = 'gi';
var strFilterRegEx = new RegExp(permittedChars, flags);

log.debug ('strFilterRegEx: ' + strFilterRegEx);

strVal = strVal.replace(strFilterRegEx, '');
// this replaces hard code solt:
// strVal = strVal.replace(/[^a-z0-9 _,.?!@+]/ig, '');
var permittedChars='^a-z0-9,.?!@';
permittedChars='['+permittedChars+']';
var标志='gi';
var strFilterRegEx=新的RegExp(permittedChars,flags);
log.debug('strFilterRegEx:'+strFilterRegEx);
strVal=strVal.replace(strFilterRegEx',);
//这将取代硬代码solt:
//标准偏差=标准偏差。更换(/[^a-z0-9,.?!@+]/ig');

多亏了前面的答案,这个模块可以作为一个通用解决方案,将可配置字符串应用到正则表达式中。。用于过滤文本:

var permittedChars = '^a-z0-9 _,.?!@+<>';
permittedChars = '[' + permittedChars + ']';

var flags = 'gi';
var strFilterRegEx = new RegExp(permittedChars, flags);

log.debug ('strFilterRegEx: ' + strFilterRegEx);

strVal = strVal.replace(strFilterRegEx, '');
// this replaces hard code solt:
// strVal = strVal.replace(/[^a-z0-9 _,.?!@+]/ig, '');
var permittedChars='^a-z0-9,.?!@';
permittedChars='['+permittedChars+']';
var标志='gi';
var strFilterRegEx=新的RegExp(permittedChars,flags);
log.debug('strFilterRegEx:'+strFilterRegEx);
strVal=strVal.replace(strFilterRegEx',);
//这将取代硬代码solt:
//标准偏差=标准偏差。更换(/[^a-z0-9,.?!@+]/ig');

这里有一行代码:
str.replace(/[\\\\{}()[\]^$+*?.]/g,'\\$&')

我是从NPM模块得到的

试一试:

escapeStringRegExp.matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
function escapeStringRegExp(str) {
    return str.replace(escapeStringRegExp.matchOperatorsRe, '\\$&');
}

console.log(new RegExp(escapeStringRegExp('example.com')));
// => /example\.com/
使用带标志的标记模板文字支持:

function str2reg(flags = 'u') {
    return (...args) => new RegExp(escapeStringRegExp(evalTemplate(...args))
        , flags)
}

function evalTemplate(strings, ...values) {
    let i = 0
    return strings.reduce((str, string) => `${str}${string}${
        i < values.length ? values[i++] : ''}`, '')
}

console.log(str2reg()`example.com`)
// => /example\.com/u
函数str2reg(标志='u'){
return(…args)=>newregexp(escapeStringRegExp(evalTemplate(…args))
,国旗)
}
函数evalTemplate(字符串,…值){
设i=0
返回strings.reduce((str,string)=>`${str}${string}${
i/example\.com/u

这里有一行代码:
str.replace(/[\\\\{}()[\]^$+*?.]/g,'\\$&')

我是从NPM模块得到的

试一试:

escapeStringRegExp.matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
function escapeStringRegExp(str) {
    return str.replace(escapeStringRegExp.matchOperatorsRe, '\\$&');
}

console.log(new RegExp(escapeStringRegExp('example.com')));
// => /example\.com/
使用带标志的标记模板文字支持:

function str2reg(flags = 'u') {
    return (...args) => new RegExp(escapeStringRegExp(evalTemplate(...args))
        , flags)
}

function evalTemplate(strings, ...values) {
    let i = 0
    return strings.reduce((str, string) => `${str}${string}${
        i < values.length ? values[i++] : ''}`, '')
}

console.log(str2reg()`example.com`)
// => /example\.com/u
函数str2reg(标志='u'){
return(…args)=>newregexp(escapeStringRegExp(evalTemplate(…args))
,国旗)
}
函数evalTemplate(字符串,…值){
设i=0
返回strings.reduce((str,string)=>`${str}${string}${
i/example\.com/u

当字符串无效或不包含标志等时,此操作也有效:

函数regExpFromString(q){
让flags=q.replace(/.*\/([gimuy]*)$/,“$1”);
如果(标志===q)标志='';
let pattern=(flags?q.replace(新的RegExp('^/(.*?/'+flags+'$),'$1'):q);
尝试{returnnewregexp(pattern,flags);}catch(e){returnnull;}
}
log(regExpFromString('\\bword\\b'));
log(regExpFromString('\/\\bword\\b\/gi');

当字符串无效或不包含标志等时,此操作也有效:

函数regExpFromString(q){
让flags=q.replace(/.*\/([gimuy]*)$/,“$1”);
如果(佛罗里达州)