DOM HTML 구문 분석

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에 대한 함수를 적용하고 source.html의 같은 경로에 output.html로 저장하십시오.

친절하게 도와주세요 ...

출처

2014-04-17 PHP Geany

당신은 파일 시스템에서 작동하는 서버 측 언어, PHP 같은 것을 사용해야 할 것입니다. 자바 스크립트 함수가 제대로 작동하지 않을 것이라고 생각합니다. FileSystem API가 제한적이라고 생각합니다. 당신은 PHP와 AJAX를보고 싶습니다. –

이것은 파싱에 관한 것이 아닙니다. 구문 분석은 브라우저가 DOM 트리를 구성하기 위해 수행하는 작업입니다. 따라서 DOM을 조작 할 때 문서가 이미 파싱되어 있어야합니다. –

Willshaw의 답변은 정확합니다. Javascript에는 문제를 해결할 수있는 많은 권한이 없습니다. 일부 서버 측 스크립팅을 수행해야합니다.

출처

2014-04-17 05:37:43 Sathishkumar

나는 이전 답변에 동의하며, 매우 이상한 방법입니다.

DOM 파싱은 자바 스크립트로 정말 쉽습니다. 클라이언트 측에서 파싱을 할 수 있습니다. 그런 다음 처리 된 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>

출처

2014-04-17 06:48:49 Yoann

빈 페이지를 출력합니다. 여기에서 찾기 http://tool.setinfotec.com/parser.html –

위의 코드를 스타일 태그에 복사/붙여 넣을 때 실제로 작동 할 것으로 기대합니까? (크롬 검사관에서 귀하의 예를 확인했습니다) – Yoann

DOM HTML 구문 분석

답변

관련 문제