2014-04-17 182 views
0

Source.HTMLDOM HTML解析

<!DOCTYPE html> 
<html> 
<body> 
<h1 style="color:red">Hello World</h1> 
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p> 
</body> 
</html> 

Parser.html

<!DOCTYPE html> 
<html> 
<body> 
<button onclick="myFunction()">Parse</button> 
<script> 
function myFunction() 
{ 
document.getElementsByTagName("H1")[0].removeAttribute("style"); 
document.getElementsByTagName("P")[0].removeAttribute("style"); 
}; 
</script> 
</body> 
</html> 

現在我需要的是引導,我需要從解析器解析按鈕。 html將source.html的功能應用到output.html並保存在source.html的相同路徑中...

請幫助我...

+0

你需要使用服務器端語言,像PHP,與文件系統的工作。 您的JavaScript函數不適用於此,我認爲FileSystem API是有限的。你想看看PHP和AJAX –

+0

這不是關於解析。解析是瀏覽器爲構建DOM樹所做的工作。因此,當您操作DOM時,文檔必須已經被解析。 –

回答

0

Willshaw說的是正確的。 Javascript沒有那麼大的能力來解決你的問題。你需要去做一些服務器端的腳本。

0

我同意上一個答案,這是一個很奇怪的方法。

但是,DOM解析對於javascript來說非常簡單,我可以在客戶端進行解析,然後將處理後的html發送到後端,並將其保存在result.html中。

我將使用Jquery爲例,方式更簡單。

Parser.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>load demo</title> 
    <style> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<button id="btnLoad">Load Source</button> 
<button id="btnParse">Parse</button> 
<button id="btnSave">Save</button> 

<div style="display:none" id="sourceContainer"></div> 

<script> 
$(document).ready(function() { 
    $(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");}) 
    $(".btnParse").click(function(){ 
     $(".sourceContainer h1").removeAttr("style"); 
     $(".sourceContainer p").removeAttr("style"); 
    }) 
    $(".btnSave").click(function(){ 
     var data = { 
      html: $("#sourceContainer").html() 
     }; 
     //replace first param by the backend url, add callback function 
     $.post("http://...", data, ...); 
    }) 
}); 
</script> 

</body> 
</html> 
+0

它輸出空白頁.. 這裏找到http://tool.setinfotec.com/parser.html –

+0

當你將上面的代碼複製/粘貼到樣式標籤中時,你真的希望它能夠工作嗎? (我檢查了你的例子在鉻檢查員) – Yoann