Konvertieren der Benutzereingabezeichenfolge in einen regulären Ausdruck

Ich entwerfe einen Tester für reguläre Ausdrücke in HTML und JavaScript. Der Benutzer gibt einen regulären Ausdruck und eine Zeichenfolge ein und wählt die Funktion, mit der er testen möchte (z. B. Suchen, Übereinstimmen, Ersetzen usw.), über das Optionsfeld aus. Das Programm zeigt die Ergebnisse an, wenn diese Funktion mit den angegebenen Argumenten ausgeführt wird. Natürlich gibt es zusätzliche Textfelder für die zu ersetzenden zusätzlichen Argumente und dergleichen.

Mein Problem besteht darin, die Zeichenfolge vom Benutzer abzurufen und in einen regulären Ausdruck umzuwandeln. Wenn ich sage, dass sie keine //Regex-Zeichen haben müssen , die sie eingeben, können sie keine Flags wie gund setzen i. Sie müssen also das //'s um den Ausdruck haben, aber wie kann ich diesen String in einen regulären Ausdruck konvertieren? Es kann kein Literal sein, da es eine Zeichenfolge ist, und ich kann es nicht an den RegExp-Konstruktor übergeben, da es keine Zeichenfolge ohne die //Zeichen ist. Gibt es eine andere Möglichkeit, eine Benutzereingabezeichenfolge in einen regulären Ausdruck zu verwandeln? Muss ich den String und die Flags der Regex mit den //'s analysieren und dann anders konstruieren? Soll ich sie eine Zeichenfolge eingeben lassen und dann die Flags separat eingeben?

Verwenden Sie den RegExp-Objektkonstruktor , um einen regulären Ausdruck aus einer Zeichenfolge zu erstellen:

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

oder

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

Hier ist ein Einzeiler: str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')

Ich habe es vom Escape-String-Regexp- NPM-Modul erhalten.

Probieren Sie es aus:

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

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

Verwenden von markierten Vorlagenliteralen mit Unterstützung für Flags:

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

Verwenden Sie den JavaScript RegExp-Objektkonstruktor .

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

Sie können Flags als zweites Zeichenfolgenargument an den Konstruktor übergeben. Einzelheiten finden Sie in der Dokumentation.

In meinem Fall war die Benutzereingabe manchmal von Trennzeichen umgeben und manchmal nicht. deshalb habe ich noch einen fall hinzugefügt ..

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

Ich schlage vor, dass Sie auch separate Kontrollkästchen oder ein Textfeld für die speziellen Flags hinzufügen. Auf diese Weise ist klar, dass der Benutzer keine hinzufügen muss //. Geben Sie im Falle eines Ersetzens zwei Textfelder an. Dies wird Ihr Leben viel einfacher machen.

Warum? Weil sonst einige Benutzer //'s hinzufügen , während andere nicht. Und einige machen einen Syntaxfehler. Nachdem Sie die //s entfernt haben, erhalten Sie möglicherweise einen syntaktisch gültigen regulären Ausdruck, der nicht dem entspricht, was der Benutzer beabsichtigt hat, was zu seltsamem Verhalten führt (aus Sicht des Benutzers).

Dies funktioniert auch, wenn die Zeichenfolge ungültig ist oder keine Flags usw. Enthält:

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

Wenn Sie eine Zeichenfolge wirklich in einen regulären Ausdruck konvertieren möchten, verwenden Sie die folgende Funktion:

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

Sie können es so verwenden:

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

Als Referenz ist hier die formatierte und modernere Version:

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

Dank früherer Antworten eignet sich dieser Block als allgemeine Lösung zum Anwenden einer konfigurierbaren Zeichenfolge in eine RegEx .. zum Filtern von Text:

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

Sie können mithilfe von Kontrollkästchen nach Flags fragen und dann Folgendes tun:

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

Ich benutze eval, um dieses Problem zu lösen.

Zum Beispiel:

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