Conversión de cadena de entrada de usuario a expresión regular

Estoy diseñando un probador de expresiones regulares en HTML y JavaScript. El usuario ingresará una expresión regular, una cadena y elegirá la función con la que desea probar (por ejemplo, buscar, igualar, reemplazar, etc.) mediante un botón de opción y el programa mostrará los resultados cuando esa función se ejecute con los argumentos especificados. Naturalmente, habrá cuadros de texto adicionales para reemplazar los argumentos adicionales y demás.

Mi problema es obtener la cadena del usuario y convertirla en una expresión regular. Si digo que no necesitan tener //alrededor de la expresión regular que ingresan, entonces no pueden establecer banderas, como gy i. Entonces tienen que tener los //'s alrededor de la expresión, pero ¿cómo puedo convertir esa cadena en una expresión regular? No puede ser un literal ya que es una cadena, y no puedo pasarlo al constructor RegExp ya que no es una cadena sin el //'s. ¿Hay alguna otra forma de convertir una cadena de entrada de usuario en una expresión regular? ¿Tendré que analizar la cadena y las banderas de la expresión regular con los //'s y luego construirla de otra manera? ¿Debo hacer que ingresen una cadena y luego ingresen las banderas por separado?

Use el constructor de objetos RegExp para crear una expresión regular a partir de una cadena:

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

var flags = inputstring.replace(/.*\/([gimy]*)$/, '$1');
var pattern = inputstring.replace(new RegExp('^/(.*?)/'+flags+'$'), '$1');
var regex = new RegExp(pattern, flags);

o

var match = inputstring.match(new RegExp('^/(.*?)/([gimy]*)$'));
// sanity check here
var regex = new RegExp(match[1], match[2]);

Aquí hay una frase: str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')

Lo obtuve del módulo NPM escape-string-regexp .

Probándolo:

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

console.log(new RegExp(escapeStringRegExp('example.com')));
// => /example\.com/

Uso de literales de plantilla etiquetados con soporte de banderas:

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

Use el constructor de objetos JavaScript RegExp .

var re = new RegExp("\\w+");
re.test("hello");

Puede pasar banderas como un segundo argumento de cadena al constructor. Consulte la documentación para más detalles.

En mi caso, la entrada del usuario a veces estaba rodeada de delimitadores y, a veces, no. por eso agregué otro caso ...

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);
}

Le sugiero que también agregue casillas de verificación separadas o un campo de texto para las banderas especiales. De esta manera, está claro que el usuario no necesita agregar ninguno //. En el caso de un reemplazo, proporcione dos campos de texto. Esto hará tu vida mucho más fácil.

¿Por qué? Porque de lo contrario, algunos usuarios agregarán //'s' mientras que otros no. Y algunos harán un error de sintaxis. Luego, después de despojar los //'s, puede terminar con una expresión regular sintácticamente válida que no se parece en nada a lo que el usuario pretendía, lo que lleva a un comportamiento extraño (desde la perspectiva del usuario).

Esto funcionará también cuando la cadena no sea válida o no contenga banderas, etc.

function regExpFromString(q) {
  let flags = q.replace(/.*\/([gimuy]*)$/, '$1');
  if (flags === q) flags = '';
  let pattern = (flags ? q.replace(new RegExp('^/(.*?)/' + flags + '$'), '$1') : q);
  try { return new RegExp(pattern, flags); } catch (e) { return null; }
}

console.log(regExpFromString('\\bword\\b'));
console.log(regExpFromString('\/\\bword\\b\/gi'));
            

Si realmente desea convertir una cadena en una expresión regular, intente usar la siguiente función:

function String2Regex(s){return new RegExp(s.match(/\/(.+)\/.*/)[1], s.match(/\/.+\/(.*)/)[1]);}

Puedes usarlo así:

"abc".match(String2Regex("/a/g"))
> ["a"]

Como referencia, aquí está la versión formateada y más moderna:

const String2Regex = str => {
  // Main regex
  const main = str.match(/\/(.+)\/.*/)[1]

  // Regex options
  const options = str.match(/\/.+\/(.*)/)[1]

  // Return compiled regex
  return new RegExp(main, options)
}

Gracias a las respuestas anteriores, este bloque sirve como una solución de propósito general para aplicar una cadena configurable en un RegEx ... para filtrar texto:

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, '');

Puedes pedir banderas usando casillas de verificación y luego hacer algo como esto:

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

Yo uso evalpara resolver este problema.

Por ejemplo:

    function regex_exec() {

        // Important! Like @Samuel Faure mentioned, Eval on user input is a crazy security risk, so before use this method, please take care of the security risk. 
        var regex = $("#regex").val();

        // eval()
        var patt = eval(userInput);

        $("#result").val(patt.exec($("#textContent").val()));
    }