確定文本內部的DIV是大膽

Question

我有一個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; } 

現在我只是想檢查一個字符串多德是否大膽所有的資料覈實。看起來處理HTML會很麻煩，因爲有很多方法可以提供粗體格式。如何識別DIV中的某些文本是否粗體。請幫我在這

Answer 1

也許這樣，這個選擇頁面上的每個元素，然後檢查它是computed style爲font-weight設定爲'bold'（也可以是由'b「或」strong）。如果它符合此規則，那麼該元素將記錄到控制檯。

注意：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

Answer 2

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

見fiddle

Answer 3

如果你可以使用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你可以操縱你有多少「點擊」期待，以及與referencedBoldsSelector，你可以很容易地爲你的粗體添加CSS類似的選擇器。

請注意：包含區分大小寫。

Answer 4

這將創建一個treeWalker併爲您的文本內容 「哥們」 大膽禮每個節點不管類名或標記名：

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/

Answer 5

您可以使用getComputedStyle()函數來確定元素的當前值。這包括任何繼承的值從父元素：

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

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

A「映射」形成的數字值可像bold標識符可以在MDN article on font-weight找到。