确定DIV内的文本是粗体 [英] Determine text inside a DIV is in Bold

问题描述

我的HTML结构如下所示

I have a HTML structure like below

<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中的某些文本是否以粗体显示。请帮我这个

Now I just wanted to check whether a string Dude is in bold of all DIVs. It seems like dealing with HTML would be messy as there are so many ways to give bold formatting. How can I identify whether some text inside a DIV is in bold or not. Please help me on this

推荐答案

也许这样，这会选择页面上的每个元素，然后检查它的计算样式 US / docs / CSS / font-weightrel =nofollow> font-weight 设置为'bold'（也可以是' b '或'强大的）。如果它符合此规则，则该元素将记录到控制台。

Perhaps like this, this selects each element on the page and then checks it's computed style for font-weight set as ´bold´ (can also be by ´b´ or ´strong). If it matches this rule then the element is logged to the console.

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

Note: getComputedStyle detects 'b' and 'strong' and so no extra tests are required to detect those elements.

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

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

On jsfiddle

当然，这是检查页面上的所有内容，但查找所需文本并检查这些元素非常简单这个原则。

Of course this is checking everything on the page but it is fairly simple to look for your required text and check just those elements using this principle.

通过更改为此行：

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

在 jsfiddle

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

Note: getComputedStyle is not supported on older browsers, and neither is Array.forEach

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

document.querySelectorAll is also not supported on all older browsers.

对于Array.forEach，有很多这些垫片，或者你可以更改将它变成for或while循环。

There are plenty of shims out these for Array.forEach, or alteratively you can change it to a for or while loop.

getComputedStyle有点问题，但是如果你需要更多跨浏览器的东西，那么这应该会让你更宽支持。

getComputedStyle is s little more of a problem, but if you need something that is more cross browser, then this should give you wider support.

Javascript

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

On jsfiddle

这篇关于确定DIV内的文本是粗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！