recognize html code

Question

Is there a javascript function that recognize if a string variable contains HTML code? I would like to avoid this case because if I use innerHTML and the user has submitted something like <img src='link'> it doesn't appear the string but the real image... I hope I explained Thank you!

Have a look at this question: stackoverflow.com/questions/5499078/… — Labu
– Labu, Commented Nov 12, 2012 at 17:07
Simple solution: Don't use innerHTML. document.createTextNode('some string') — Shmiddty
– Shmiddty, Commented Nov 12, 2012 at 17:09

SReject · Accepted Answer · 2012-11-12 17:31:05Z

2

You can just replace 3 very special characters:
&: used for glyph notation
<: opening bracket for html tags
>: closeing bracket for html tags

function make_safe(input) {
    return input.replace("&", "&amp;").replace(/(<?)([^<>]*)(>?)/g, function (a,b,c,d) {
        if ((b+c+d).toLowerCase() === "<br>") return "<br>";

        if (b === "<") b = "&lt;";
        if (b === ">") b = "&gt;";

        if (d === "<") d = "&lt;";
        if (d === ">") d = "&gt;";

        return b+c+d;
    }).replace(/\r?\n/g,"<br>");
}

// example:
mydiv.innerHTML = make_safe('<img src="/pic.jpg">');

I did a little magic so \r\n becomes a newline, and   tags are preserved

edited Nov 12, 2012 at 17:31

answered Nov 12, 2012 at 17:10

SReject

3,9462 gold badges28 silver badges44 bronze badges

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

5 Comments

Martina Over a year ago

tha fact is that in the string I must have the tag

SReject Over a year ago

Is that the only character you need?

SReject Over a year ago

if the userinput uses carriage return/newline feeds instead of  , use the above.

SReject Over a year ago

Updated my answer so   tags are preserved.

Martina Over a year ago

thank you! later I will try and I can give you the correct answer

Quentin · Accepted Answer · 2012-11-12 17:08:54Z

1

Not really. Telling the difference between HTML and text talking about HTML is not a trivial problem.

If you are expecting text input, then deal with text not HTML. Don't use innerHTML, use createTextNode and appendChild/insertBefore.

answered Nov 12, 2012 at 17:08

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

3 Comments

Quentin Over a year ago

createTextNode gives no special meaning to the < or > characters at all. It takes a string and treats it as plain text to be added to the DOM, not HTML that needs to be parsed.

Martina Over a year ago

tha fact is that in the string I must have the tag

Quentin Over a year ago

@Marty – So you want some HTML to be escaped and some HTML to be passed through? That is a different and much, much more complicated problem.

Collectives™ on Stack Overflow

recognize html code

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related