2014-06-18 2 views
1

html 클래스와 아래 jquery 코드를 사용하여 렌더링되지 않은 HTML 코드를 표시하려고합니다. 태그 <html>, <head><body>을 제외한 모든 태그 작업 그것. 텍스트로 표시 할 수있는 방법이 있습니까?jQuery를 사용하여 HTML 태그를 텍스트로 표시하려면 어떻게해야합니까?

$(document).ready(function() { 
    $('.html').each(function() { 
     $(this).text($(this).html()); 
    }); 
}); 

HTML 코드 :

<pre> 
<div class="html"> 
    <html> 
    <head><title>Title</title></head> 
    <body> 
    <p>Unrendred html</p> 
    </body> 
    </html> 
</div> 
</pre> 

예상 내용 :

<div class="html"> 
    <html> 
    <head><title>Title</title></head> 
    <body> 
    <p>Unrendred html</p> 
    </body> 
    </html> 
</div> 

실제 내용 :

<title>Title</title> 

<p>Unrendred html</p> 
+1

브라우저가 유효하지 않은 태그를 제거하고 있습니다. 여기서 최종 목표는 무엇입니까? 이 문제를 해결할 수있는 더 좋은 방법이있을 것이라고 확신합니다 (아마도 템플릿입니까?). – styfle

+0

은 내가 , 및 태그를 포함하는 HTML 코드 조각을 보여주는 HTML 문서를 만들고 싶었다 .. – Cyril

답변

-1

<> 문자를 이스케이프 - 당신의 HTML에, 그리고 JS에 뿐만 아니라을 사용합니다.기능을 대신 html()

<pre> 
<div class="html"> 
    &lt;p&gt;&lt; html/&gt;&lt;/p &gt 
    &lt;head &gt;&lt;title &gt;Title&lt;/title&gt;&lt;/head &gt; 
    &lt;body &gt; 
    &lt;p &gt;Unrendred html&lt;/p &gt; 
    &lt;/body &gt; 
    &lt;/html&gt; 
</div> 
</pre> 


$(document).ready(function() { 
    $('.html').each(function() { 
     $(this).text($(this).html); 
    }); 
}); 

http://fiddle.jshell.net/p3BXK/16/

+0

그는 당신과 동일한 결과를 얻을. 나는 그가 과 요소를보고 싶어한다고 생각합니다. –

+0

여전히 출력을 변경하지 않습니다. 태그 , 및 은 여전히 ​​출력되지 않습니다. – Cyril

+0

@webSpider 예, 브라우저를 "속이기"위한 좋은 방법 : D –

4

귀하의 HTML이 잘못되었습니다. 이러한 태그를 넣을 위치는 대부분 가질 수 없습니다. 브라우저가 잘못된 HTML을 구문 분석을 시도 할 때

, 그것은 당신의 오류를 명중하고 복구를 시도합니다.

이 결과는 DOM의 .html 요소 안에 들어 가지 않으므로 DOM을 HTML로 다시 변환하려고 시도하면 나타나지 않습니다. 당신이 그들을 밖으로 긁어 수

유일한 방법은 서버에서 원시 소스 코드를 다시 반입 한 후 HTML을 직접 구문 분석 할 수있을 것입니다.

그냥 처음부터 제대로 HTML을 작성합니다. < 문자를 렌더링하려면 &lt;을 HTML에 배치하십시오 (등등). 브라우저가 이미 구문 분석 한 후에는 JavaScript로 HTML을 이스케이프하지 마십시오.

2

당신이 바이올린 예에서

예상 된 결과 아래와 같이 태그 구문을 교체해야 - 방식의 프로토 타입을 처리 http://jsfiddle.net/uEMh2/

<pre> 
&lt;div class="html"&gt; 
    &lt;html&gt; 
    &lt;head&gt;&lt;title&gt;Title&lt;/title&gt;&lt;/head&gt; 
    &lt;body&gt; 
    &lt;p&gt;Unrendred html&lt;/p&gt; 
    &lt;/body&gt; 
    &lt;/html&gt; 
&lt;/div&gt; 
</pre> 
1
escapeHTML { 
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); 
} 

이잖아.

관련 문제