Блог

Главная - Вопросы по программированию - Выделите строки, соответствующие регулярному выражению, с помощью javascript

Выделите строки, соответствующие регулярному выражению, с помощью javascript

#javascript

#javascript

Вопрос:

Я пытаюсь больше изучить JavaScript, работая над проектами, которые меня интересуют, поэтому простите меня, если это очень простой вопрос.

Я пытаюсь создать инструмент, который обнаруживает строку слов (предпочтительно текстовый или JSON-файл) со страницы HTML (в div).

 <html>
    <title>Hello world</title>
    <head>
    </head>
    <body>
        <div class="print" id="print"></div>
        <textarea class="textarea" class="answerBox" id="answerBox"></textarea>
        <script>
                var inputBox = document.getElementById('answerBox');
                inputBox.onkeyup = function(){
                    document.getElementById('print').innerHTML = inputBox.value;
                }
        </script>
        

        
    </body>
</html>

Вот что я сделал до сих пор: https://jsfiddle.net/mc3kqj4t / По сути, это все еще ничего, но то, что я хочу сделать, это ввести что-то в поле, затем, как только я набираю текст, он мгновенно появляется на странице, но также, пока это происходит, я могу видеть, есть ли какие-либо слова, которые я ввелсодержат определенные ключевые слова, соответствующие регулярному выражению (например, «fox» и его перестановки «f ox» или что-то в этом роде). Мне нужно ссылаться на внешний файл, потому что слова нужно время от времени обновлять.

Кто-нибудь может помочь?

Ответ №1:

Мысли:

  1. Вы можете сохранить входной текст в переменной, а регулярное выражение — в другой. (не уверен, что в вашем случае необходимы оба варианта)
  2. Используйте JavaScript replace для замены совпадений регулярных выражений выделенным HTML-кодом.

Пожалуйста, ознакомьтесь с этой демонстрацией на основе вашего кода.

 <html>
<title>Vulgarism Sandbox</title>

<head>
</head>

<body>
  <p>Try input in the textarea with some text containing `aw `</p>
  <div class="print" id="print"></div>
  <textarea class="textarea" class="answerBox" id="answerBox" value="abcde"></textarea>
  <input value="aw " id="regexInput" />
  <script>
    var inputBox = document.getElementById('answerBox');
    inputBox.onkeyup = function() {
      const regexInput = new RegExp(document.getElementById('regexInput').value, 'ig');
      const text = document.getElementById('answerBox').value;

      // replace regex matches in input text, and add 'highlight' HTML
      const renderText = text.replace(regexInput, match => `<b>${match}</b>`)
      document.getElementById('print').innerHTML = renderText;
    }
  </script>



</body>

</html>

Комментарии:

1. Спасибо. Это каким-то образом применимо к тому, что я хочу сделать, но я также хочу иметь динамический список слов, которые я могу просто заменить, когда они, вероятно, хранятся в текстовом файле или файле json, чтобы я мог изменять слова, когда захочу. Также кажется, что это не позволяет вам добавлять более одного слова? но это очень хорошее начало, спасибо вам!

Метки: