How to replace < and > with < and > with jQuery or JS

Question

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.

possible duplicate of Encode HTML entities

Spudley
– Spudley

2013-07-31 09:09:14 +00:00
Commented Jul 31, 2013 at 9:09 — Spudley
– Spudley, Commented Jul 31, 2013 at 9:09
use escape character with them

Hushme
– Hushme

2013-07-31 09:09:30 +00:00
Commented Jul 31, 2013 at 9:09 — Hushme
– Hushme, Commented Jul 31, 2013 at 9:09
< for < and > for > use can use these

Vikas Gautam
– Vikas Gautam

2013-07-31 09:09:33 +00:00
Commented Jul 31, 2013 at 9:09 — Vikas Gautam
– Vikas Gautam, Commented Jul 31, 2013 at 9:09
stackoverflow.com/a/12034334/1073758

moonwave99
– moonwave99

2013-07-31 09:09:38 +00:00
Commented Jul 31, 2013 at 9:09 — moonwave99
– moonwave99, Commented Jul 31, 2013 at 9:09
stackoverflow.com/questions/1219860/…

Christian Phillips
– Christian Phillips

2013-07-31 09:10:54 +00:00
Commented Jul 31, 2013 at 9:10 — Christian Phillips
– Christian Phillips, Commented Jul 31, 2013 at 9:10

Prisoner · Accepted Answer · 2013-07-31 09:10:29Z

6

Assuming you just want to escape all HTML:

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

answered Jul 31, 2013 at 9:10

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MDEV Over a year ago

If you run that code on this page (changing selector to just "code" of course), it fails quite spectacularly

sulfureous Over a year ago

This seems like the solution I'm looking for definitively, however, it's just not working for me, it keeps rendering the <h2> as a heading an not as text. What could I be possibly doing wrong by implementing one line of code? hehe... I know I have the selector right. I tried it with a <code> tag or a <div> tag and no go.

Prisoner Over a year ago

@sulfureous, it must be your inclusion of jQuery or the way you're running the code. This basic example works fine: jsfiddle.net/T8kBt

sulfureous Over a year ago

Thanks, this seems to work now. Must have been a cache issue.

MDEV · Accepted Answer · 2013-07-31 09:19:26Z

5

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;')
    );
});

edited Jul 31, 2013 at 9:19

answered Jul 31, 2013 at 9:09

MDEV

10.9k2 gold badges35 silver badges50 bronze badges

Comments

harpax · Accepted Answer · 2013-07-31 09:10:37Z

1

You could use the text function of jquery:

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

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

answered Jul 31, 2013 at 9:10

harpax

6,1265 gold badges38 silver badges49 bronze badges

1 Comment

sulfureous Over a year ago

Thank you @harpax this definitively works too, but it's longer than the accepted answer and it does the same... But it works, no doubt.

mikach · Accepted Answer · 2013-07-31 09:26:10Z

1

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

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

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

edited Jul 31, 2013 at 9:26

answered Jul 31, 2013 at 9:11

mikach

2,4272 gold badges16 silver badges15 bronze badges

2 Comments

sulfureous Over a year ago

The fiddle doesn't link to your fiddle, it just links to jsfiddle.net

sulfureous Over a year ago

This worked for me as in the fiddle. It's simple and it makes sense now, so we are creating a variable called t and it equals to the HTML of the .codeIt element and then we are taking that same .codeIt element and using the .text() method to print the t variable as text and add it to the HTML. Am I understanding this right?

Raidri · Accepted Answer · 2013-07-31 09:09:33Z

0

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

answered Jul 31, 2013 at 9:09

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

2 Comments

Xophmeister Over a year ago

This will only replace the first instance of < and >. You need to do a global regexp replace, like @SmokeyPHP.

Tony Over a year ago

Please include a description of your solution for it to be a more helpful answer.

Guillaume Lhz · Accepted Answer · 2013-07-31 09:15:44Z

0

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>

answered Jul 31, 2013 at 9:15

Guillaume Lhz

9045 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to replace < and > with < and > with jQuery or JS

UPDATE:

Here is the fiddle

6 Answers 6

4 Comments

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

6 Answers 6

4 Comments

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related