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 Fiddle demo

如果您希望它不区分大小写，并且避免匹配＆＃39; Johnson＆＃39;：

var allDivs = document.querySelectorAll('div');

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

JS Fiddle demo

正如其他答案所示，最好避免直接设置元素样式，而是依靠使用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 Fiddle demo

仅突出显示名称＆＃39; John＆＃39;的所有实例。（或＆＃39; john＆＃39;）：

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 Fiddle demo

参考文献：

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

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

4 个答案: