jQueryのか、バニラのJavaScript：すべて< and >

Question

を交換するか、エスケープ私はこの

<div id="asdf"> 
    <div> 
    <p>ASDF IS AWESOME</p> 
    </div> 
    <h1>Just another Headline</h1> 
    <nav> 
    <ul> 
     <li class="listitem">Hey</li> 
    </ul> 
    </nav> 
</div> 

とjQueryまたはvanilla JavaScript機能を必要とするようなdiv要素を持っているので、この

<div id="asdf" 
    <div> 
    <p>ASDF IS AWESOME</p> 
    </div> 
    <h1>Just another Headline</h1> 
    <nav> 
    <ul> 
     <li class="listitem"Hey</li> 
    </ul> 
    </nav> 
</div> 

に全体のものを変換する方法私はただ逃げたい<と>

私は.replaceとを試しました210

Answer 1

が

var html = $('#asdf').html(); 
 
var escaped=$('<div/>').text(html).html(); 
 
console.log(escaped);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="asdf"> 
 
    <div> 
 
    <p>ASDF IS AWESOME</p> 
 
    </div> 
 
    <h1>Just another Headline</h1> 
 
    <nav> 
 
    <ul> 
 
     <li class="listitem">Hey</li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 2

はこれを試してみてくださいすることをお試しください：のみ1機能を使用して、あなたはあなたが好きな場所にそれを使用することができ

$(document).ready(function(){ 
 
    $selector = $('#asdf');  
 
    console.log(htmlEntities($selector)); 
 
    function htmlEntities(str) { 
 
    str = str.html(); 
 
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="asdf"> 
 
    <div> 
 
    <p>ASDF IS AWESOME</p> 
 
    </div> 
 
    <h1>Just another Headline</h1> 
 
    <nav> 
 
    <ul> 
 
     <li class="listitem">Hey</li> 
 
    </ul> 
 
    </nav> 
 
</div>

あなたはこれを参照することができますのhttps://css-tricks.com/snippets/javascript/htmlentities-for-javascript/