Javascript 由于元素中存在空间，将数组元素拆分为更多元素

我想输入一块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", "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);
    });
});

$（函数（）{
$（“#提交代码”）。单击（函数（）{
var CSS_CLASSES=[]；
var CSS_id=[]；
var el=document.createElement（'div'）；
var text=$（“#代码输入”）.val（）；
el.innerHTML=文本；
var nodes=el.getElementsByTagName（'*'）；
对于（var i=0；i0）{
CSS_id.push（node.id）；
}
如果（node.className.length>0）{
CSS_CLASSES.push（node.className）；
}
}
var uniqueNames=[]；
$。每个（CSS_类，函数（i，el）{
如果（$.inArray（el，uniqueNames）=-1）uniqueNames.push（el）；
});     
console.log（uniqueNames+“--”+uniqueNames.length）；
});
});

---

实际上从未拆分过数组。使用以下命令：

    $.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]);
                }
            });

$。每个（CSS_类，函数（i，el）{
控制台日志（i+“：”+el）；
分割的var=el.分割（“”）；
对于（var j=0；j

---

实际上从未拆分过数组。使用以下命令：

    $.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]);
                }
            });

$。每个（CSS_类，函数（i，el）{
控制台日志（i+“：”+el）；
分割的var=el.分割（“”）；
对于（var j=0；j

---

您需要在空格中拆分类名（

拆分（/\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);
    });
});

$（函数（）{
$（“#提交代码”）。单击（函数（）{
var CSS_CLASSES=[]；
var CSS_id=[]；
var el=document.createElement（'div'）；
var text=$（“#代码输入”）.val（）；
el.innerHTML=文本；
var nodes=el.getElementsByTagName（'*'）；
对于（var i=0；i0）{
CSS_id.push（node.id）；
}
如果（node.className.length>0）{
var classNames=node.classNamesplit（/\s+/）；
对于（var j=0；j

您需要在空格中拆分类名（

拆分（/\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);
    });
});

$（函数（）{
$（“#提交代码”）。单击（函数（）{
var CSS_CLASSES=[]；
var CSS_id=[]；
var el=document.createElement（'div'）；
var text=$（“#代码输入”）.val（）；
el.innerHTML=文本；
var nodes=el.getElementsByTagName（'*'）；
对于（var i=0；i0）{
CSS_id.push（node.id）；
}
如果（node.className.length>0）{
var classNames=node.classNamesplit（/\s+/）；
对于（var j=0；j

这可以在一行中完成：

CSS\u CLASSES.push.apply（CSS\u CLASSES，node.className.split（“”））

JSFiddle：

基本上，JavaScript的
apply（）
调用
push（）
并将参数列表作为数组传递给它，以应用于CSS_类
.split（“”
方便地为我们提供了一个用空格分隔的术语数组。
这可以在一行中完成：

CSS\u CLASSES.push.apply（CSS\u CLASSES，node.className.split（“”））

JSFiddle：

基本上，JavaScript的
apply（）
调用
push（）
并将参数列表作为数组传递给它，以应用于CSS_类
.split（“”
方便地为我们提供了一个用空格分隔的术语数组