由于元素中的空间,将数组元素拆分为更多元素

时间:2014-04-28 14:18:04

标签: javascript jquery html css

http://jsfiddle.net/rfnslyr/Zxav9/1/

我想输入一个HTML代码块,让它唯一地提取所有CSS类和ID。问题是,它将以下每个视为唯一的单一类。

<div class="test hello"></div> 
<div class="test hello"></div> 
<div class="test hello bye"></div> 
<div class="test hello bye yes"></div>

这是我的控制台输出:

0:test hello
1:test hello
2:test hello bye
3:test hello bye yes

uniqueNames["test hello", "test hello bye", "test hello bye yes"] 

理想情况下,我的控制台输出应该如下:

0:test hello
1:test hello
2:test hello bye
3:test hello bye yes

uniqueNames["test", "hello", "bye", "yes"] 

功能

$(function() {
    $('#submitCode').click(function() {
        var CSS_CLASSES = [];
        var CSS_IDS = [];
        var el = document.createElement( 'div' );
        var text = $("#codeInput").val();
        el.innerHTML = text;       
        var nodes = el.getElementsByTagName('*');

        for(var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if(node.id.length > 0) {
                CSS_IDS.push(node.id); 
            }
            if(node.className.length > 0) {
                CSS_CLASSES.push(node.className);   
            }
        }

        var uniqueNames = [];
        $.each(CSS_CLASSES, function(i, el){
            if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
        });     

        console.log(uniqueNames + " --- " + uniqueNames.length);
    });
});

http://jsfiddle.net/rfnslyr/Zxav9/1/

3 个答案:

答案 0 :(得分:2)

您需要在空格(split(/\s+/))上拆分类名,试试这个:

$(function() {
    $('#submitCode').click(function() {
        var CSS_CLASSES = [];
        var CSS_IDS = [];
        var el = document.createElement( 'div' );
        var text = $("#codeInput").val();
        el.innerHTML = text;       
        var nodes = el.getElementsByTagName('*');

        for(var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if(node.id.length > 0) {
                CSS_IDS.push(node.id); 
            }
            if(node.className.length > 0) {
                var classNames = node.classNamesplit(/\s+/);
                for (var j = 0; j < classNames.length; j++) {
                    CSS_CLASSES.push(classNames[j]);   
                }
            }
        }

        var uniqueNames = [];
        $.each(CSS_CLASSES, function(i, el){
            if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
        });     

        console.log(uniqueNames + " --- " + uniqueNames.length);
    });
});

答案 1 :(得分:2)

这可以在一行中完成:

CSS_CLASSES.push.apply(CSS_CLASSES, node.className.split(" "));

JSFiddle:http://jsfiddle.net/w645W/

基本上,JavaScript apply()调用push()并将一个参数列表作为数组提交给CSS_CLASSES。 .split(" ")方便地为我们提供了一系列由空格分隔的术语。

答案 2 :(得分:1)

你从未真正拆分数组。使用此:

    $.each(CSS_CLASSES, function (i, el) {
                console.log(i + ":" + el);
                var splitted = el.split(' ');
                for (var j = 0; j < splitted.length; j++) {
                    if ($.inArray(splitted[j], uniqueNames) === -1)
                       uniqueNames.push(splitted[j]);
                }
            });

Fiddle