WedX - журнал о программировании и компьютерных науках

Как передать переменную в выражение регулярного выражения в javascript?

Я делаю инструмент поиска по списку, чтобы проверить определенное имя в длинном списке. Мне удалось жестко закодировать имя в регулярном выражении, но мне нужно, чтобы оно было динамическим. Вот код:

    function processString(){
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = //use variable 'userIn' for regex
  $('#textArea').html(result);

  if(result != null){
    for(var i = 0; i < result.length; i++){
      document.getElementById('textArea').value += result[i] + '\r\n';
    }
  }

}

codepen

javascript dynamic regex
12.08.2018

  • Можете ли вы показать нам весь код, использующий это регулярное выражение? 12.08.2018

Ответы:


1

Во-первых, вам нужно экранировать пользовательский ввод, чтобы механизм регулярных выражений интерпретировал его буквально. Из этого ответа мы можем написать такую ​​функцию:

  RegExp.escape= function(s) {
      return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
  };

Затем мы можем создать регулярное выражение. Я предполагаю, что вы хотите использовать регулярное выражение, подобное этому, поскольку вы хотите искать имена:

\b<user input here>\b

Вы можете объединить строки

var regex = new RegExp("\\b" + RegExp.escape(userIn) + "\\b", "g");

Полный код:

function processString(){
  RegExp.escape= function(s) {
    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
};
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = new RegExp("\\b" + RegExp.escape(userIn) + "\\b", "g");
  
  var result = inputString.match(regex);
  $('#textArea').html(result);
  
  if(result != null){
    for(var i = 0; i < result.length; i++){
      document.getElementById('textArea').value += result[i] + '\r\n';
    }
  }
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>List of Names</p><input type="text" id='textBox' style='width:250px;'>
<br><br>
<p>name to search for</p><input type="text" id='userInput' style='width:250px;'>
<br><br>
<input type="button" value='search' style='width:250px;' onclick='processString()'>
<br><br>
<textarea name="area" id="textArea" cols="30" rows="10"></textarea>

12.08.2018

2

Вы можете создать новый RegExp, создав экземпляр объекта RegExp следующим образом:

var regex = new RegExp(userIn, "ig"); //use variable 'userIn' for regex

Первый параметр — это значение, переданное из userInput, второй — это флаги. i означает iбез учета регистра, g означает gглобальный (проверить всю строку, не останавливаться после найти первое совпадение)

Чтобы использовать регулярное выражение для проверки имени по списку, используйте:

  var match = inputString.match(regex);

Это вернет все совпадения regex в inputString.

function processString() {
  document.getElementById('textArea').value = "";
  var inputString = document.getElementById('textBox').value;
  var userIn = document.getElementById('userInput').value;
  var regex = new RegExp(userIn, "ig"); //use variable 'userIn' for regex
  var match = inputString.match(regex);
  if (match !== null) {
    for (var i = 0; i < match.length; i++) {
      document.getElementById('textArea').value += match[i] + '\r\n';
    }
  }

}
<p>List of Names</p><input type="text" id='textBox' style='width:250px;'>
<br><br>
<p>name to search for</p><input type="text" id='userInput' style='width:250px;'>
<br><br>
<input type="button" value='search' style='width:250px;' onclick='processString()'>
<br><br>
<textarea name="area" id="textArea" cols="30" rows="10"></textarea>

12.08.2018
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
Для любых предложений по сайту: [email protected]