javascript - 如何在没有 jQuery 的情况下应用 ":contains" 选择器？

Question

我希望能够执行此功能

$( "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<elements.length;i++) {
    var elem = elements[i];
    if (elem.innerHTML.indexOf("John") != -1) {
        // do whatever you plan to do
    }
}

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 小提琴演示。

正如其他答案所证明的那样，最好避免直接设置元素的样式，而是依赖使用 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, '<span class="underlined">$1</span>');
    }
});

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);
    }
}