#javascript #html
Вопрос:
Как применить функцию выделения определенного слова Javascript к классу или идентификатору
function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') { const flags = caseSensitive ? 'gi' : 'g'; keywords.sort((a, b) =gt; b.length - a.length); Array.from(elem.childNodes).forEach(child =gt; { const keywordRegex = RegExp(keywords.join('|'), flags); if (child.nodeType !== 3) { highlight(child, keywords, caseSensitive, cls); } else if (keywordRegex.test(child.textContent)) { const frag = document.createDocumentFragment(); let lastIdx = 0; child.textContent.replace(keywordRegex, (match, idx) =gt; { const part = document.createTextNode(child.textContent.slice(lastIdx, idx)); const highlighted = document.createElement('span'); highlighted.textContent = match; highlighted.classList.add(cls); frag.appendChild(part); frag.appendChild(highlighted); lastIdx = idx match.length; }); const end = document.createTextNode(child.textContent.slice(lastIdx)); frag.appendChild(end); child.parentNode.replaceChild(frag, child); } }); } highlight(document.body, ['lorem', 'amet', 'autem']); .highlight { background: lightpink; } lt;div class="mytext"gt;lt;pgt;Hello world lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vel accusantium totam, ipsum delectus et dignissimos mollitia!lt;/pgt; lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis. lt;smallgt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the walllt;/smallgt; lt;/pgt; lt;div contenteditable="true"gt;hello amet thislt;/divgt; lt;/divgt; теперь эта функция применима ко всему на сайте, нужно обратиться к class .mytext
Я новичок в javascript, поэтому демонстрационный пример был бы полезен.
Спасибо
Ответ №1:
сначала найдите нужный элемент, а затем используйте функцию выделения.
пример здесь:
function highlight(elem, keywords, caseSensitive = false, cls = 'highlight') { const flags = caseSensitive ? 'gi' : 'g'; keywords.sort((a, b) =gt; b.length - a.length); Array.from(elem.childNodes).forEach(child =gt; { const keywordRegex = RegExp(keywords.join('|'), flags); if (child.nodeType !== 3) { highlight(child, keywords, caseSensitive, cls); } else if (keywordRegex.test(child.textContent)) { const frag = document.createDocumentFragment(); let lastIdx = 0; child.textContent.replace(keywordRegex, (match, idx) =gt; { const part = document.createTextNode(child.textContent.slice(lastIdx, idx)); const highlighted = document.createElement('span'); highlighted.textContent = match; highlighted.classList.add(cls); frag.appendChild(part); frag.appendChild(highlighted); lastIdx = idx match.length; }); const end = document.createTextNode(child.textContent.slice(lastIdx)); frag.appendChild(end); child.parentNode.replaceChild(frag, child); } }); } var byClass = document.getElementsByClassName('mytext')[0]; highlight(byClass, ['lorem', 'amet', 'autem']); .highlight { background: lightpink; } lt;div class="mytext"gt;lt;pgt;Hello world lorem ipsum dolor sit amet, consectetur adipisicing elit. Est vel accusantium totam, ipsum delectus et dignissimos mollitia!lt;/pgt; lt;pgt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, corporis. lt;smallgt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem voluptas perferendis dolores ducimus velit error voluptatem, qui rerum modi? this is amet in the walllt;/smallgt; lt;/pgt; lt;div contenteditable="true"gt;hello amet thislt;/divgt; lt;/divgt; Комментарии:
1. вопрос в том, как это сделать? мне нужно применить этот код только для class=»mytext», а не для всего сайта
2. отредактировал свой комментарий с примером. вам просто нужно найти нужный элемент
3. Большое Вам спасибо, отлично работает
4. @IvanDern не могли бы вы, пожалуйста, отметить это как ответ? это будет высоко оценено
Ответ №2:
Вы применяете свою highlight функцию к document.body . Вместо этого вы должны применить его к элементу с идентификатором:
highlight(document.getElementById('your_id'), ['lorem', 'amet', 'autem']); Или ко всем элементам с некоторым классом:
document.querySelectorAll('.your_class').forEach(function(element) { highlight(element, ['lorem', 'amet', 'autem']); }); Комментарии:
1. спасибо, что выделили(document.getElementById работает на решетке, но эта функция не является документом. querySelectorAll(‘.your_class’).forEach(функция(элемент) { выделить(элемент, [‘lorem’, ‘amet’, ‘autem’]); });
2. Я не могу вам в этом помочь, вам придется разобраться в этом самому. Код правильный, он должен выбрать все элементы с некоторым классом и применить вашу функцию
highlightк каждому из них.3. моя ошибка, работает правильно в обоих вариантах, большое Вам спасибо