Javascript 提取所有CSS类和ID'；在给定的HTML块中_Javascript_Jquery_Html_Css_Regex

Javascript 提取所有CSS类和ID'；在给定的HTML块中

javascript jquery html css regex

Javascript 提取所有CSS类和ID'；在给定的HTML块中,javascript,jquery,html,css,regex,Javascript,Jquery,Html,Css,Regex,我有一个文本区，在那里我粘贴了一块HTML代码。当我点击submit时，我想从该块中提取所有CSS类和ID，并将它们放入一个数组中到目前为止，我的submit和正则表达式一样有效，但我不知道如何过滤整个块并提取文本与正则表达式匹配的所有实例 index.html <body> <textarea id="codeInput"></textarea> <button id="submitCode">submit</button

我有一个文本区，在那里我粘贴了一块HTML代码。当我点击submit时，我想从该块中提取所有CSS类和ID，并将它们放入一个数组中

到目前为止，我的submit和正则表达式一样有效，但我不知道如何过滤整个块并提取文本与正则表达式匹配的所有实例

index.html

<body>
    <textarea id="codeInput"></textarea>
    <button id="submitCode">submit</button>
    <script src="functions.js"></script>
</body>

将function.js设置为如下所示：

$(function() {
    $('#submitCode').click(function() {
        var codeInput = $('textarea#codeInput').val();
        var $input = $(codeInput);
        var attrs: {
            'class': [],
            'id': []
        };
        $input.find('*').each(function() {
            attrs.class.push($(this).attr('class'));
            attrs.id.push($(this).attr('id'));
        });
        attrs.class.push($input.attr('class'));
        attrs.id.push($input.attr('id'));
    });
});

这将遍历输入代码中的每个元素，并删除它们的

类

和

id

属性，方法是首先遍历输入中容器元素的所有子元素，然后对输入中的容器元素执行相同的操作。

将function.js设置为如下所示：

$(function() {
    $('#submitCode').click(function() {
        var codeInput = $('textarea#codeInput').val();
        var $input = $(codeInput);
        var attrs: {
            'class': [],
            'id': []
        };
        $input.find('*').each(function() {
            attrs.class.push($(this).attr('class'));
            attrs.id.push($(this).attr('id'));
        });
        attrs.class.push($input.attr('class'));
        attrs.id.push($input.attr('id'));
    });
});

$('#submitCode').click(function() {
    var codeInput = $('textarea#codeInput').val();
    var codeHTML = $('<div>', { html: codeInput }); // Parse the input as HTML
    var allIds = [];
    var allClasses = [];
    codeHTML.find('[id]').each(function() {
        allIds.push(this.id);
    });
    codeHTML.find('[class]').each(function() {
        allClasses = allClasses.concat(this.className.split(' '));
    });
    console.log("IDs: " + allIds.join(', '));
    console.log("Classes: " + allClasses.join(', '));
});

通过首先检查输入中容器元素的所有子元素，然后对输入中的容器元素执行相同的操作，从而遍历输入代码中的每个元素，并删除它们的

类和id
属性。
$（'#submitCode'）。单击（函数（）{
$('#submitCode').click(function() {
    var codeInput = $('textarea#codeInput').val();
    var codeHTML = $('<div>', { html: codeInput }); // Parse the input as HTML
    var allIds = [];
    var allClasses = [];
    codeHTML.find('[id]').each(function() {
        allIds.push(this.id);
    });
    codeHTML.find('[class]').each(function() {
        allClasses = allClasses.concat(this.className.split(' '));
    });
    console.log("IDs: " + allIds.join(', '));
    console.log("Classes: " + allClasses.join(', '));
});

var codeInput=$（'textarea#codeInput'）.val（）；
var codeHTML=$（''，{html:codeInput}）；//将输入解析为html
var allIds=[]；
var-allClasses=[]；
codeHTML.find（'[id]'）。每个（函数（）{
allid.push（this.id）；
});
codeHTML.find（'[class]'）。each（function（）{
allClasses=allClasses.concat（this.className.split（“”））；
});
log（“id:+allIds.join（'，'））；
log（“Classes:+allClasses.join（'，'））；
});
$（“#提交代码”）。单击（函数（）{
var codeInput=$（'textarea#codeInput'）.val（）；
var codeHTML=$（''，{html:codeInput}）；//将输入解析为html
var allIds=[]；
var-allClasses=[]；
codeHTML.find（'[id]'）。每个（函数（）{
allid.push（this.id）；
});
codeHTML.find（'[class]'）。each（function（）{
allClasses=allClasses.concat（this.className.split（“”））；
});
log（“id:+allIds.join（'，'））；
log（“Classes:+allClasses.join（'，'））；
});

提交
$（函数（）{
$（“#提交代码”）。单击（函数（）{
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）；
}
}
log（CSS_类）；
日志（CSS_id）；
});
});


提交
$（函数（）{
$（“#提交代码”）。单击（函数（）{
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）；
}
}
log（CSS_类）；
日志（CSS_id）；
});
});

就个人而言，我最喜欢Barmar的解决方案，但这很有效（）：
就我个人而言，我最喜欢Barmar的解决方案，但这是可行的（）：
OP不想删除类和id，他们想存储在数组中。。children
只获取直接子代，而不是所有子代。呃，我不想删除任何内容，只是想将HTML块中的所有类和id放入数组中。谢谢。$（codeInput）
如果codeInput
不是以HTML标记开头，则将无法使用。即使这样，find（'*'）
也会忽略最外层的标记，因为它只搜索子体。有关这些问题的解决方法，请参见我的答案。@eveo这就是您当时所寻找的吗？OP不想删除类和id，而是希望存储在数组中。。children
只获取直接子代，而不是所有子代。呃，我不想删除任何内容，只是希望将HTML块中的所有类和id放入数组中。谢谢。$（codeInput）
如果codeInput
不是以HTML标记开头，则将无法使用。即使这样，find（'*'）
也会忽略最外层的标记，因为它只搜索子体。请看我的答案，了解解决这些问题的方法。@eveo这就是你当时所寻找的吗？我想你误解了文本区应该是什么。这不是一个选择器列表，而是HTML代码。阅读问题的第一行：我粘贴HTML代码块的文本区域。我想你误解了文本区域中应该包含的内容。这不是选择器列表，而是HTML代码。请阅读问题的第一行：我在第一个regexp中粘贴HTML代码块Missingid=
？您只获得第一个id和类，而不是全部。@Barmar-我正在学习regex，如果您有机会看到我在回答这个问题时提出的分叉问题，我将不胜感激：在第一个regexp中缺少id=？您只得到了第一个id和类，而不是全部。@Barmar-我正在学习regex，如果你有机会的话，希望你能看看我这个答案上的分叉问题：这只会给我包含源代码的当前网页上使用的类和ID，而不是我粘贴到textarea中的文本。这只会给我包含源代码的当前网页上使用的类和ID，不是我粘贴到文本区域的文本。出于某种原因，这不起作用，它不起作用
$('#submitCode').click(function() {
   var codeInput = $('#codeInput').val();
   var ids = codeInput.match(/id="(.*?)"/);
   var classes = codeInput.match(/class="(.*?)"/);
   var output = classes[1].split(" ");
   output.push( ids[1] );
   console.log(output);
});

$(function() {
    $('#submitCode').click(function() {
        var ids = [], classes = [];        
        $("[id],[class]").each(function(i, el) {
            var id, c;
            if (id = $(this).attr('id')) {
                ids.push(id);
            }            
            if (c = $(el).attr('class')) {
                classes.push(c);
            }
        });
        console.log(ids, classes);
    });
});