文章彙整

利用Javascript,自製清理網頁元素工具

Astral WebBy Astral Web 3 years agoNo Comments
首頁  /  網站設計與開發  /  利用Javascript,自製清理網頁元素工具

利用Javascript,自製清理網頁元素工具

相信不少的網頁工作者,都會有類似的經驗,尤其是在需要重新整理網頁內容,或是重構網站時,看到一堆過去的網頁程式碼,元素其中不乏各種css,class,id,甚至是bgcolor,width一類的行內屬性,這時就可以利用這個工具來清理掉這些元素屬性,還原成最乾淨的html網頁程式碼。

不過,先提醒一下,此工具並沒有特別處理例外,例如說img的src屬性也是一併會被清除的。

直接來看程式碼(重點執行清除功能的是藍字的程式部分)

<html>
<head>
	<title></title>
	<style type="text/css">
	#dest{
		border: solid black 1px;
		min-width: 100px;
		min-height: 100px;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#process').click(function(){
				var source_code = $('#source').val();
				$('#dest').html($(source_code));
				$('#dest *').each(function(){
					var attributes = $.map(this.attributes, function(item) {
						return item.name;
					});
					var obj = $(this);
					$.each(attributes, function(i, item){
						obj.removeAttr(item);
					})
				})
			})
		})
	</script>
</head>
<body>
	Source code :
	<br>
	<textarea id="source"></textarea>
	<br>
	<br>
	<input id="process" type="button" value="remove attr">
	<br>
	<br>
	Display :
	<br>
	<div id="dest"></div>
</body>
</html>

 

以上程式碼只要複製存檔成html,然後用瀏覽器開啟這個html檔案(直接按住html檔案拉到瀏覽器上放開),就可以執行了,執行起來就會像下面的gif動畫,再用檢查元素,複製你想要的程式碼部分即可。

image00

補充說明:這個功能不論你放入多少的程式碼,只要html程式碼的頭尾完整,多少的程式碼都可以一次清除乾淨。

參考資源:

http://stackoverflow.com/questions/1870441/remove-all-attributes

http://api.jquery.com/

歐斯瑞有限公司編寫製作

 

 

 

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。