Question

目前，我有一个类似以下的HTML。

<div style="color:red">AB<div style="color:blue">C</div>DEF</div>

有没有办法，我可以遍历文本，这样我就可以知道我有5个字符（ABDEF）为红色，1个字符（C）为蓝色？

Answer 1

然后，您可以使用样式颜色过滤它。

Example

$('div').each(function(){
    debugger
    var color = $(this).prop('style').color;
    var len =     $(this).contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).text().length;
    console.log(color+ ' content length is :'+len);
})

Answer 2

一种简单的方法是将内联样式移动到css类。找出他们内心的内容长度。样本如下

<style>

A { color:red }

B { color:blue } </style> 

<html> <div class="A">AB<div class="B">C</div>D</div> </html>

JS：

var totalLength=$('div.A').text().length  
var  blueLength=$('div.B').text().length 
var  redLength=totalLength-blueLength

输出：3为红色，1为蓝色

Answer 3

请试试这个！它应该最终解决您的问题。 - Demo

$(document).ready(function() {

    reds = 0;
    blues = 0;

    $('div').each(function(){
        var css_style = $(this).attr('style');

        if(css_style.indexOf('color:red') > -1) {
            reds += $(this).text().length;
            if($(this).children().length > 0) {
                count = $(this).children().text().length;
                final_reds = reds - count;
            } else {
                final_reds = reds;
            }
        }

        if(css_style.indexOf('color:blue') > -1) {
            blues += $(this).text().length;
            if($(this).children().length > 0) {
                count = $(this).children().text().length;
                final_blues = blues - count;
            } else {
                final_blues = blues;
            }
        }

    });

    $('body').append('There are ' + final_reds + ' chars in red div(s) and '+ final_blues +' chars in blue div(s).');

});

Answer 4

从child div text

中删除parent div text

    $(document).ready(function () {
    function findText($div) {
        var text = $div.text();
        $div.children().each(function () {
           text = text.replace($(this).text(), "")
        })
        return text.replace(/(\r\n|\n|\r)/gm,"");//replace new line if want to
    }
    alert("in red" + findText($('div[style*="color:red"]')).length);
    alert("in blue" + findText($('div[style*="color:blue"]')).length);
});

这里是小提琴http://jsfiddle.net/vikrant47/a64Lta6u/13/

分析有多少个字符为红色，多少个字符为蓝色

4 个答案: