[英]Extracting all CSS classes and ID's in a given HTML block
我有一個文本區域，我在其中粘貼了一段 HTML 代碼。 當我點擊提交時，我想從該塊中提取所有 CSS 類和 ID，並將它們放入一個數組中。
到目前為止，我的提交工作和正則表達式一樣，但我不知道如何過濾整個塊並提取文本與我的正則表達式匹配的所有實例。
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();
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(', '));
});
使您的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'));
});
});
首先遍歷輸入中容器元素的所有子元素，然后對輸入中的容器元素執行相同的操作，從而遍歷輸入代碼中的每個元素，並刪除其class和id屬性。
<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);
});
});
$(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);
});
});
我遇到了同樣的挑戰，並修改了@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;
}
是否從特定樣式表中識別特定HTML頁面中使用的所有CSS ID和類？
[英]Identify all css ID's and classes used in a particular HTML page from a specific stylesheet?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.