Использование ванильного javascript для скрытия тега, содержащего определенный текст
У меня есть этот код, который скрывает div, который содержит только определенное слово, я пытался (безуспешно) скрыть любой div, который содержит это слово, но также содержит больше текста.
Любая помощь будет оценена, спасибо!
let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content == 'example') {
div.style.display = 'none';
}
}<div class = "test">
ipsum
</div>
<div class = "test">
example
</div>
<div class = "test">
example complete
</div>Может быть, вы поместили свой код js перед рендерингом dom? попробуйте window.onload для вызова функций.
@IslamElshobokshy работает для точных совпадений (как видно из примера кода — example скрыт), но не для любого контента, включающего термин (также видно во фрагменте — example complete не скрыт).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете использовать JavaScript string.includes().
Хакерский способ удалить только div, содержащий более чем только "пример", состоит в том, чтобы иметь "example " в includes(). Это удалит div только в том случае, если у innerHTML есть пробел после «примера».
let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content.includes('example')) {
div.style.display = 'none';
}
}<div class = "test">
ipsum
</div>
<div class = "test">
example
</div>
<div class = "test">
example complete
</div>Я думаю, это именно то, что нужно оператору.
contains this word, but also contains more text.точно tresf, мне нужно также скрыть div, который содержит текст: «пример завершен». С моим текущим кодом я могу только скрыть div, содержащий текст: «пример».
@MartijnVissers Я бы просто сделал: if (divs[x].innerHTML.includes('example'), но в любом случае: D
@Elias Есть много способов сократить этот код, но не знаю, есть ли у OP еще код, который не нужен для вопроса или чего-то еще, поэтому небольшое изменение может быть лучшим. Но спасибо за предложение :)
@MartijnVissers Конечно... Мне больше нравится твой ответ :)
@MartijnVissers Это будет мой перейти к.
Когда вы выполняете div.innerHTML.trim(), он занимает весь элемент div.
https://jsfiddle.net/ucvteLq7/7/
Попробуйте поискать среди регулярных выражений, и я думаю, что вы не должны скрывать div в соответствии с его классом, но вы должны заменить то, что в нем содержится. Извините, что больше не могу помочь.
Что-то современное…
document.querySelectorAll('.test').forEach((element, index) => {
if (element.innerText.includes('example')) {
element.style.display = 'none';
}
})<div class = "test">ipsum</div>
<div class = "test">example</div>
<div class = "test">example complete</div>Документы:NodeList.prototype.forEach()String.prototype.includes()
ха! теперь это именно то, что я бы сделал, хорошо :) О ... ну, может быть, я бы использовал функцию стрелки: P
Я что-то неправильно понял? @Энди
@Энди Хммм.. почему он принял меня?. Я думаю, мы не уверены, что ему нужно :)
@user2965583 user2965583 Это то, что тебе нужно? проверить результат
@Энди, я думаю, ему нужно что-то вроде этого. Пожалуйста, проголосуйте за меня
Если вы хотите удалить div, который содержит искомое слово (проверено с помощью includes), но в котором также есть другие символы, возможно, сохраните слово в переменной и проверьте, длиннее ли текст.
let divs = document.getElementsByClassName('test');
const word = 'example';
for (let x = 0; x < divs.length; x++) {
let div = divs[x];
let content = div.innerHTML.trim();
if (content.includes(word) & content.length > word.length) {
div.style.display = 'none';
}
}<div class = "test">
ipsum
</div>
<div class = "test">
example
</div>
<div class = "test">
example complete
</div>Вот модернизированная версия этого кода.
let divs = document.querySelectorAll('.test');
const word = 'example';
divs.forEach(div => {
const { style, textContent } = div;
const trimmed = textContent.trim();
if (trimmed.includes(word) && trimmed.length > word.length) {
style.display = 'none';
}
});<div class = "test">
ipsum
</div>
<div class = "test">
example
</div>
<div class = "test">
example complete
</div>
Ваш пример работает, в чем проблема?