I've been searching for a day or so how to do something with JS or jQuery and found a couple of solutions but nothing solid yet.

I want to use this:

<code class="codeIt">

  <h2> This is an H2 </h2>

</code>

And I want the output to be:

<h2> This is an H2 </h2>

I know I can achieve this by doing:

<code class="codeIt">

  &lt;h2&gt; This is an H2 &lt;/h2&gt;

</code>

...But I would like to not do a manual search and replace on my code in those blocks and rather have it done on the fly in the browser. Is this possible?

I'm pretty noob with jQuery so I've tried .replaceWith or JavaScript's .replace but so far I've not gotten where I need to be with it. I'm either replacing the whole tag or doing something else wrong.

My question is: How would I write a simple jQuery (or regular JS) to help me replace my < and my > with HTML entities like < and > inside my <code> tags.

I appreciate any help, Thanks.

UPDATE:

I managed to get it working nice how @Prisoner explained, it's very nifty, however this in my particular case needed a little extending because I have more than one block of code with the .codeIt class, so I had to make it check each element and output... otherwise it would keep making the same output (like the first block)

Here is the fiddle

Thanks to everyone for their answers.

I've been searching for a day or so how to do something with JS or jQuery and found a couple of solutions but nothing solid yet.

I want to use this:

<code class="codeIt">

  <h2> This is an H2 </h2>

</code>

And I want the output to be:

<h2> This is an H2 </h2>

I know I can achieve this by doing:

<code class="codeIt">

  &lt;h2&gt; This is an H2 &lt;/h2&gt;

</code>

...But I would like to not do a manual search and replace on my code in those blocks and rather have it done on the fly in the browser. Is this possible?

I'm pretty noob with jQuery so I've tried .replaceWith or JavaScript's .replace but so far I've not gotten where I need to be with it. I'm either replacing the whole tag or doing something else wrong.

My question is: How would I write a simple jQuery (or regular JS) to help me replace my < and my > with HTML entities like < and > inside my <code> tags.

I appreciate any help, Thanks.

UPDATE:

I managed to get it working nice how @Prisoner explained, it's very nifty, however this in my particular case needed a little extending because I have more than one block of code with the .codeIt class, so I had to make it check each element and output... otherwise it would keep making the same output (like the first block)

Here is the fiddle

Thanks to everyone for their answers.

• javascript
• jquery
• html

• possible duplicate of Encode HTML entities – Spudley Commented Jul 31, 2013 at 9:09
• use escape character with them – Hushme Commented Jul 31, 2013 at 9:09
• &#60; for < and &#62; for > use can use these – Vikas Gautam Commented Jul 31, 2013 at 9:09
• stackoverflow.com/a/12034334/1073758 – moonwave99 Commented Jul 31, 2013 at 9:09
• stackoverflow.com/questions/1219860/… – Christian Phillips Commented Jul 31, 2013 at 9:10

6 Answers 6

Assuming you just want to escape all HTML:

$(".codeIt").text($(".codeIt").html());

Plain JS for single code element

var myCode = document.getElementById('mycode');
myCode.innerHTML = myCode.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')

Plain JS for multiple code elements

var codeEls = document.getElementsByTagName('code');
for(var i in codeEls)
{
    if(parseInt(i)==i)
    {
        var codeEl = codeEls[i];
        if(codeEl.className.match(/\bcodeIt\b/)!==null) codeEl.innerHTML = codeEl.innerHTML.replace(/</g,'&lt;').replace(/>/g,'&gt;')
    }
}

or jQuery

$(".codeIt").each(function() {
    $(this).html(
        $(this).html().replace(/</g,'&lt;').replace(/>/g,'&gt;')
    );
});

You could use the text function of jquery:

var myText = $('.codeIt').html();

var escapedText = $('.codeIt').text(myText).html();

var t = $('.codeIt').html();

$('.codeIt').text(t).html();

Look at this fiddle http://jsfiddle.net/kU8bV/1/

$('code').html($('code').html().replace(/</g, '&lt;').replace(/>/g, '&gt;'));

Assuming you want to code all the html in codeIt class :

<script type="text/javascript">
        function htmlEncode(value){
            if (value) {
                return jQuery('<div />').text(value).html();
            } else {
                return '';
            }
        }

        function htmlDecode(value) {
            if (value) {
                return $('<div />').html(value).text();
            } else {
                return '';
            }
        }       
        $('.codeIt').each(function() {
            myEncodedString = htmlEncode($(this).html());
            $(this).html(myEncodedString);
        });
</script>