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

Extracting all CSS classes and ID's in a given HTML block

本文关键字：块中 HTML CSS 类和 ID 提取      更新时间：2023-09-26

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

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

index.html

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

函数.js

$(function() {
    $('#submitCode').click(function() {
        var codeInput = $('textarea#codeInput').val();
        console.log(codeInput);
    });
});

$('#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(', '));
});

让你的函数.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'));
    });
});

这将遍历输入代码中的每个元素，并删除它们的class和id属性，方法是首先遍历输入中容器元素的所有子元素，然后对输入中的容器元素执行同样的操作。

就我个人而言，我最喜欢Barmar的解决方案，但这很有效（jsfiddle）：

$('#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);
    });
});

<textarea id="codeInput">
    <div id="hello"><div class="w"></div></div>
    <div id="world"></div>
    <div class="my-class"></div>
</textarea>
<button id="submitCode">submit</button>
$(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);    
            }
        }
        console.log(CSS_CLASSES);
        console.log(CSS_IDS);
    });
});

http://jsfiddle.net/zeZ93/6/

我遇到了同样的挑战，并由@Ryan修改了代码，以提取所有（唯一的）类和ID，包括当多个类应用于同一元素时。它非常有用，适用于任何URL。

请参阅http://jsfiddle.net/pixelfast/4uftwbm0/57/

谢谢。

<!-- HTML -->
<textarea id="codeInput" cols=50 rows=10></textarea>
<button id="submitCode">submit</button>
<!-- jQuery -->
var remoteURL = "https://getbootstrap.com";
function url_content(url) {
  return $.get(url);
}
url_content(remoteURL).success(function(data) {
  $('#codeInput').val(data);
});
$(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 x = node.className.split(" ")
        $.each(x, function(index, val) {
          if (val != '') {
            CSS_CLASSES.push(val);
          }
        });
      }
    }
    console.log("CLASSES FOUND: ", unique(CSS_CLASSES));
    console.log("IDs FOUND: ", unique(CSS_IDS));
  });
});

function unique(list) {
  var result = [];
  $.each(list, function(i, e) {
    if ($.inArray(e, result) == -1) result.push(e);
  });
  return result;
}
相关文章：