How To Replace < with < and > with > using jquery

Question

I have a page that is part of a backend CRM admin panel. On that page the HTML output comes from some PHP functions that I can't access. And that HTML automatically changes < and > into HTML encoded characters.

So there is a div that contains html tags like <br /> that is converted into <b />

So I need to change it back to the HTML characters using only jQuery:

< to <
&gt; to >

Is there a jQuery script I can use to replace those special characters with the corresponding symbols? This will mean my HTML tags will actually work and the HTML will being displayed properly on the screen?

I've tried removewith() but i can't make it work.

ADDED: The div that im trying to modify is this

<div style="font-size: 11px; width: 90%; font-family: Tahoma;" id="cotiz">&lt;strong&gt;Valuación&lt;/strong&gt; de InfoAuto: 35.500,00&lt;br /&gt; 
Cotización Seleccionada: Ninguna&lt;br /&gt; 
Allianz, Responsabilidad Civil: $205,25&lt;br /&gt; 
Allianz, Terceros Completos: $278,85 </div>

Sufflate

Just on the off chance, are you using .text() to insert the data instead of .html()? – Janettajanette

possible duplicate of How do I find and replace HTML entities with jQuery? – Shavon

@Shavon - Please note the capitalization in the above comment. ;) – Burghley

This is some nefarious stuff – Equitant

Answer 1

The simplest thing to do would be

$('#test').each(function(){
    var $this = $(this);
    var t = $this.text();
    $this.html(t.replace('&lt','<').replace('&gt', '>'));
});

working edit/jsfiddle by Jared Farrish

Shavon

Not quite. jsfiddle.net/XS5kY Note, I have fixed a couple of issues with the above for demo purposes. – Burghley

I see that its working on that jsfiddle demo but its not working on my setup...the div reference is correct btw. What could be the problem? – Sufflate

@sebas: I have no idea. show us your whole #test element in your question – Shavon

just posted the div that your jquery cant modify in my setup for some reason. – Sufflate

SORRY edited again the question pleae check the div now as it is exactly as i can see it in the html code with the special characters that i need to convert into < and > – Sufflate

i wasnt using document.ready and an evil php function kept changing the characters now it works. you da man! – Sufflate

Answer 2

Please try this

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

to replace these characters globally. I tried this and works like a charm :)

Fogg

Answer 3

I have different solution then the conventional, and it will be applied to decode/encode html

Decode

var encodedString = "<Hello>";
var decodedText = $("<p/>").html(encodedString).text(); 
/* this decodedText will give you "<hello>" this string */

Encode

var normalString = "<Hello>";
var enocodedText = $("<p/>").text(normalString).html();
/* this encodedText will give you "&lt;Hello&gt;" this string

Secrecy

Do you have a plain javascript alternative? – Oscar

Answer 4

$('#myDivId').text(function (i, text)
{
    return text.replace('&lt;', '<').replace('&gt;', '>');
});

Dehorn

Answer 5

if use underscore.js exist _.unescape(string)

Aphoristic

Answer 6

Use $this.html('...'); instead $this.text('...');

Dismount

Answer 7

Try This:-

var wrapper=$(".contentwrap").html();
  wrapper=wrapper.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
 $(".contentwrap").html(wrapper);

Nelidanelie

Answer 8

All of the above didn't really work for me because what I needed was something to replace all < to < and > to > , not only the first one. What I did was:

.split('&lt;').join('<').split('&gt;').join('>');

Just thinking out of the box here. It worked for me, I hope it does for you too.

Townsman

Answer 9

I needed to step to find an H1 then parse the next element, because I wasn't able to use a specific ID like you did. Good tip!

$('#sscContent').find("h1").next().each(function(){
    var $this = $(this);
    var t = $this.text();
    $this.html(t.replace('&lt;','<').replace('&gt;', '>'));
});

Kenney

Answer 10

You can do it simply with php

<?php
$a =
 '<div style="font-size: 11px; width: 90%; font-family: Tahoma;" id="cotiz">&lt;strong&gt;Valuación&lt;/strong&gt; de InfoAuto: 35.500,00&lt;br /&gt; 
Cotización Seleccionada: Ninguna&lt;br /&gt; 
Allianz, Responsabilidad Civil: $205,25&lt;br /&gt; 
Allianz, Terceros Completos: $278,85 </div>';

$b = html_entity_decode($a);


echo $b;
?>

Merrie

The question specifically says using jquery! Please read the question through first! – Renaldorenard

Answer 11

I made a small tool to covert HTML text containing < and > to < and >

So you can use this tool to convert your code.

I made it using simple replaceAll() method.

elem.replaceAll('&', '&amp;').replaceAll('<','&lt;').replaceAll('>', '&gt;')

Insertion

OP wants to replace the other way around – Cosmic