如何在没有jQuery的情况下应用“：contains”选择器？

我希望能够做到这一点

$( "div:contains('John')" ).css( "text-decoration", "underline" ); 

没有使用jQuery，只是直接javascript，我找不到相同的

我知道我正在寻找indexOf ，但将它们放在一起并不符合我目前的心态。

Answer 1

像这样的东西？

 var divs= document.getElementsByTagName('div'); var len = divs.length; for (var i = 0; i < len; i++) { if(divs[i].innerHTML.indexOf("John") != -1) { divs[i].className += " underline" } } 

在css

 .underline{ text-decoration: underline; } 

Answer 2

可能是这样的：

 var elements = document.getElementsByTagName("div"); for (var i=0;i 

Answer 3

如果您只需要支持现代浏览器（并实现您发布的’翻译’代码的目标）：

 var allDivs = document.querySelectorAll('div'); [].forEach.call(allDivs, function(a){ if (a.textContent.indexOf('John') !== -1){ a.style.textDecoration = 'underline'; } }); 

JS小提琴演示 。

如果您希望它不区分大小写，并避免匹配’Johnson’：

 var allDivs = document.querySelectorAll('div'); [].forEach.call(allDivs, function(a){ if (/\bjohn\b/i.test(a.textContent)){ a.style.textDecoration = 'underline'; } }); 

JS小提琴演示 。

正如其他答案所certificate的那样，最好避免直接为元素设置样式，而是依靠使用CSS类名来设置元素的样式，这样un -styling就不需要取消设置 Node.style的各个属性。宾语。 要使用上述方法添加类（同样适用于最新的浏览器）：

 var allDivs = document.querySelectorAll('div'); [].forEach.call(allDivs, function(a){ if (/\bjohn\b/i.test(a.textContent)){ a.classList.add('underlined'); } }); 

JS小提琴演示 。

仅突出显示名称“John”（或“john”）的所有实例：

 var allDivs = document.querySelectorAll('div'); [].forEach.call(allDivs, function (a) { if (/\bjohn\b/gi.test(a.textContent)) { a.innerHTML = a.innerHTML.replace(/(\bjohn\b)/gi, '$1'); } }); 

JS小提琴演示 。

参考文献：

• Array.filter() 。
• Array.forEach() 。
• document.querySelectorAll() 。
• Element.classList 。
• Function.call() 。
• JavaScript正则表达式 。
• Regexp.test() 。

Answer 4

 var tags = document.getElementsByTagName('div'); for (i in tags) { var tag = tags[i]; if (tag && tag.innerHTML && tag.innerHTML.indexOf('John') > -1) { // Your tag! console.log(tag); } }