2

我有一个如下的 HTML 结构 

<div>Some text</div>
<div class='inBold'>Hello <b>Dude</b></div>
<div class='inBold'>Hello <span class="boldText">Dude</span></div>
<div class='inBold'>Hello <strong>Dude</strong></div>

和 CSS 是

.boldText{ font-weight : bold; }

现在我只想检查一个字符串 Dude 是否在所有 DIV 中都是粗体。处理 HTML 似乎会很麻烦，因为有很多方法可以提供粗体格式。如何识别 DIV 中的某些文本是否为粗体。请帮助我

4

5 回答 5

3 
var divs = document.getElementsByClassName('inBold');
for(var i = 0; i < divs.length; i++)
    console.log(isBold(divs[i]));

function isBold(node){
     var childNodes = node.childNodes;
     for(var i = 0; i < childNodes.length; i++)
         if(childNodes[i].nodeType != 3 && (childNodes[i].className.indexOf('boldText') != -1 
            || childNodes[i].tagName == 'B'
            || childNodes[i].tagName == 'STRONG'))
             return true;
     return false;
}

见小提琴

于 2013-04-30T12:44:53.760 回答
2

也许像这样，这会选择页面上的每个元素，然后检查它的计算样式是否设置为“粗体”（也可以是“ b ”或“强” ）。如果它与此规则匹配，则该元素将记录到控制台。

注意：getComputedStyle 检测 'b' 和 'strong'，因此不需要额外的测试来检测这些元素。

CSS

.boldText {
    font-weight : bold;
}

HTML

<div>Some text</div>
<div class='inBold'>Hello <b>Dude</b>
</div>
<div class='inBold'>Hello <span class="boldText">Dude</span>
</div>
<div class='inBold'>Hello <strong>Dude</strong>
</div>

Javascript

Array.prototype.forEach.call(document.querySelectorAll("*"), function (element) {
    if (window.getComputedStyle(element).fontWeight === "bold") { // can also use .getPropertyValue("font-weight")
        console.log("bold: ", element);
    }
});

在jsfiddle 上

当然，这是检查页面上的所有内容，但是使用此原则查找所需的文本并仅检查这些元素是相当简单的。

通过更改为这一行：

if (element.textContent === "Dude" && window.getComputedStyle(element).fontWeight.toLowerCase() === "bold") {

在jsfiddle 上

注意：旧版浏览器不支持 getComputedStyle， Array.forEach也不支持

所有旧浏览器也不支持 document.querySelectorAll。

Array.forEach 有很多填充物，或者您可以将其更改为 for 或 while 循环。

getComputedStyle 问题不大，但如果您需要更多跨浏览器的东西，那么这应该会给您更广泛的支持。

Javascript

function walkTheDOM(node, func) {
    func(node);
    node = node.firstChild;
    while (node) {
        walkTheDOM(node, func);
        node = node.nextSibling;
    }
}

function textContent(node) {
    if (typeof node.textContent !== "undefined" && node.textContent !== null) {
        return node.textContent;
    }

    var text = ""

    walkTheDOM(node, function (current) {
        if (current.nodeType === 3) {
            text += current.nodeValue;
        }
    });

    return text;
}

function camelCase(string) {
    return string.replace(/-([a-z])/g, function (matched) {
        return matched[1].toUpperCase()
    });
}

function getComputedStyleProperty(element, property) {
    if (!window.getComputedStyle) {
        if (document.defaultView && document.defaultView.getComputedStyle) {
            return document.defaultView.getComputedStyle(element).getPropertyValue(property);
        } else {
            var camelCased = camelCase(property);

            if (element.currentStyle) {
                return element.currentStyle[camelCased];
            } else {
                return element.style[camelCased];
            }
        }
    } else {
        return window.getComputedStyle(element).getPropertyValue(property);
    }
}

var elements = document.getElementsByTagName("*"),
    length = elements.length,
    i = 0,
    element;

while (i < length) {
    element = elements[i];

    if (textContent(element) === "Dude" && getComputedStyleProperty(element, "font-weight") === "bold") {
        console.log("bold: ", element);
    }

    i += 1;
}

在jsfiddle 上

于 2013-04-30T13:00:01.203 回答
2

这将创建一个 treeWalker 并检查每个带有文本内容“Dude”的节点是否适合粗体，无论 className 或 tagName 是什么：

var treeWalker = document.createTreeWalker(document.body, NodeFilter.SHOW_ALL, filter, false);

function filter(node) {
    if (node.textContent === 'Dude') {
        var computed = window.getComputedStyle(node, null);

        if(computed && computed.getPropertyValue("font-weight")=== "bold"){
            return NodeFilter.FILTER_ACCEPT;
        }

    } else {
        return NodeFilter.FILTER_SKIP;
    }
}

while(treeWalker.nextNode()) {
    //    Elements with bold text
    console.log(treeWalker.currentNode)
};

http://jsfiddle.net/bxcTp/1/

于 2013-04-30T13:02:00.327 回答
1

You can use the getComputedStyle() function to determine the current value of an element. This includes any inherited values from parent elements:

// get a pointer to your element somehow
var elem;

// get the current weight
var weight = window.getComputedStyle(elem,null).getPropertyValue("font-weight");

A "mapping" form the numeric values to identifiers like bold can be found in the MDN article on font-weight.

于 2013-04-30T13:04:13.787 回答
0

如果你可以使用 jQuery，你可以使用这个示例：

var consideredBoldsSelector = 'b, strong, span.boldText';
var expectedCount = $("div.inBold").length
var bAllMatched = $("div.inBold *:contains('Dude'):first-child").filter(consideredBoldsSelector).length === expectedCount

通过expectedCount您可以操纵您期望的“命中”数量，并且使用考虑的BoldsSelector，您可以轻松地为您的粗体添加类似css的选择器。

请注意 :contains 区分大小写。

于 2013-04-30T12:49:39.997 回答