Использование ванильного JavaScript для скрытия тега, который содержит определенный текст - PullRequest
Новая
       26

Использование ванильного JavaScript для скрытия тега, который содержит определенный текст

0 голосов
/ 22 января 2019

У меня есть этот код, который скрывает 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>

Ответы [ 4 ]

0 голосов
/ 22 января 2019

Если вы хотите удалить 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>
0 голосов
/ 22 января 2019

Когда вы делаете div.innerHTML.trim(), он занимает весь элемент div.

https://jsfiddle.net/ucvteLq7/7/

Попробуйте поискать регулярные выражения, и я думаю, вам не следует скрывать div в соответствии с его классом, но вы должны заменить его содержимое. Извините, что больше не могу помочь.

0 голосов
/ 22 января 2019

Что-то современное ... 

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>

Docs: NodeList.prototype.forEach () String.prototype.includes ()

0 голосов
/ 22 января 2019

Вы можете использовать JavaScript string.includes().

Хакерский способ удалить только div, содержащий больше, чем only "examaple", это иметь "example " в includes(). Это удалит div только в том случае, если innerHTML имеет пробел после «example» 

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>
...