Перетворення ряду введення користувача в регулярний вираз

Я розробляю тестер регулярних виразів у HTML та JavaScript. Користувач вводить регулярний вираз, рядок і вибирає функцію, з якою він хоче тестувати (наприклад, пошук, збіг, заміна тощо) за допомогою перемикача, і програма покаже результати, коли ця функція запускається із заданими аргументами. Зрозуміло, що для додаткових аргументів для заміни та таких додаткових текстових полів будуть додаткові текстові поля.

Моя проблема - отримати рядок від користувача та перетворити його на звичайний вираз. Якщо я скажу, що вони не потребують //навколо регексу, який вони вводять, вони не можуть встановлювати прапори, як-от gі i. Таким чином, вони повинні мати //"навколо" виразу, але як я можу перетворити цей рядок у регулярний вираз? Це не може бути буквальним, оскільки його рядок, і я не можу передати його конструктору RegExp, оскільки він не є рядком без //s. Чи є якийсь інший спосіб зробити рядок введення користувача в регулярний вираз? Чи доведеться мені розбирати рядок і прапори регулярного виразів //, а потім будувати його іншим способом? Чи повинен я їх ввести рядок, а потім ввести прапори окремо?

Використовуйте конструктор об'єктів RegExp для створення регулярного виразу з рядка:

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

або

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

Ось одноколісний: str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')

Я отримав це з модуля escape-string-regexp 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

Використовуйте конструктор об’єктів JavaScript RegExp .

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

Ви можете передати прапорці як другий рядок аргументу конструктору. Детальну інформацію див. У документації.

У моєму випадку введення користувачів колись було відсортовано роздільниками, а іноді ні. тому я додав ще один випадок ..

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

Я пропоную вам також додати окремі прапорці або текстове поле для спеціальних прапорів. Таким чином зрозуміло, що користувачеві не потрібно додавати жодних //. У разі заміни введіть два текстових поля. Це значно полегшить ваше життя.

Чому? Тому що в іншому випадку деякі користувачі додадуть //s, а інші не. А деякі зроблять синтаксичну помилку. Потім, після того, як ви знімете зображення //, ви можете закінчитись синтаксично правильним регулярним виразом, який не схожий на те, що призначений користувачем, що призводить до дивної поведінки (з точки зору користувача).

Це буде також працювати, коли рядок недійсна або не містить прапорів тощо:

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

Якщо ви дійсно хочете перетворити рядок у регулярний вираз, спробуйте скористатись такою функцією:

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

Ви можете використовувати його так:

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

Для довідки, тут відформатована і більш сучасна версія:

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

Завдяки попереднім відповідям, ці блоки також служать рішенням загального призначення для застосування настроюваного рядка в RegEx .. для фільтрації тексту:

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 userInput = formInput;
var flags = '';
if(formGlobalCheckboxChecked) flags += 'g';
if(formCaseICheckboxChecked) flags += 'i';
var reg = new RegExp(userInput, flags);

Я використовую evalдля вирішення цієї проблеми.

Наприклад:

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