Блог

Главная - Вопросы по программированию - Правильный способ записи $(this).text().match (r) в ванильный JS?

Правильный способ записи $(this).text().match (r) в ванильный JS?

#javascript #jquery #function #this

#javascript #jquery ( jquery ) #функция #это

Вопрос:

У меня есть следующая функция, написанная на jQuery, которую я хотел бы преобразовать в javascript, но пока я не смог найти правильный способ.

 const word = document.getElementById("searchField").value;
        const r = new RegExp("("   word   ")", "ig");
$(".list-item").each(function (i) {
            if ($(this).text().match(r)) {
                
            }
        });

Я переписал его таким образом:

 const word = document.getElementById("searchField").value;
        const r = new RegExp("("   word   ")", "ig");

        let pickComp = document.querySelectorAll('.list-item');
        Array.from(pickComp).forEach((i) => {
            if (//how can I rewrite the jQuery here?) {
                
            }
        })

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

1. Ознакомьтесь с DOM API . match это встроенный метод. По-вашему forEach , i это не индекс, а сам элемент.

2. @SebastianSimon Спасибо, Себастьян, за совет относительно того, что я

3. Документация находится здесь: forEach , match , textContent .

4. Кроме того, document.querySelectorAll возвращает повторяющуюся коллекцию HTML, поэтому вы можете forEach использовать ее напрямую, нет необходимости Array.from

Ответ №1:

 const word = document.getElementById("searchField").value;
const r = new RegExp("("   word   ")", "ig");

const pickComp = document.querySelectorAll('.list-item');

pickComp.forEach(item => {
      if (item.innerHTML.match(r)) {
        console.log("Match!!");
        }
      }) 
 <p class="list-item">abc</p>
<p class="list-item">abc</p>
<p class="list-item">abc</p>
<p class="list-item">abc</p>
<input id="searchField" value="abc">

Метки: