I have a div with id=content, and I want to change it's innerHtml to a string variable markup, but I want to disable script tags.

For example, if

markup='<b>Bold text here </b><i><script>alert("JS will be treated as normal text")</script></i>';

The content div should be

Bold text here <script>alert("JS will be treated as normal text")</script>

I can't use innerHTML since it'll run the alert box,and I can't use innerText because the other tags will be displayed as normal text.

I searched for this problem and found a lot of regix expressions.I don't know a lot about regix, but all of the expressions I found were to remove all tags, not to disable a tag.

I don't want to use jquery ,even though I tried to use .vla() and .text() and didn't work. But now I want to use js only.

I also want it to be able to handle any valid variation of the script tag, including: <Script>, <sCrIPt>, <script type= "text/javascript">, and </script >

I have a div with id=content, and I want to change it's innerHtml to a string variable markup, but I want to disable script tags.

For example, if

markup='<b>Bold text here </b><i><script>alert("JS will be treated as normal text")</script></i>';

The content div should be

Bold text here <script>alert("JS will be treated as normal text")</script>

I can't use innerHTML since it'll run the alert box,and I can't use innerText because the other tags will be displayed as normal text.

I searched for this problem and found a lot of regix expressions.I don't know a lot about regix, but all of the expressions I found were to remove all tags, not to disable a tag.

I don't want to use jquery ,even though I tried to use .vla() and .text() and didn't work. But now I want to use js only.

I also want it to be able to handle any valid variation of the script tag, including: <Script>, <sCrIPt>, <script type= "text/javascript">, and </script >

• javascript

• (Possible duplicate), see non regex, nor jQuery solution here: stackoverflow./questions/16708158/… – 1cgonza Commented Dec 2, 2015 at 3:15

3 Answers 3

You could use the replace() function to do a simple replacing of the script tags with escaped versions. You will, however, need a regex with the global flag set if you need to replace more than one instance. So, to replace the script opening and closing tags it would be like:

var html = markup.replace(/<script[^>]*>/gi, "&lt;script&rt;").replace(/<\/script[^>]*>/gi, "&lt;/script&rt;");

For replacing the closing tag, the \/ is necessary to escape the forward slash so that the browser doesn't think it is closing the regex pattern. The 'i' flag makes it case insensitive, so it doesn't matter what bination of uppercase and lowercase is used. And the [^>]* means that it will match any number of characters (including 0) that are not a >. So, that will replace any characters that are between <script and the closing >.

Simply replace any instance of <script> with something like <script&rt; so it does not render as a tag, but will output in HTML appearing as if it was a tag.

Consider the following:

markup.replace(/<script>/gi, "&lt;script&rt;");

You can do the same with the closing tag as well:

// Replaces start and end tag
markup.replace(/<script>/gi, "&lt;script&rt;").replace(/</script>/gi, "&lt;/script&rt;");

Update

By adding gi it makes the entire expression case insensitive.

You can replace all the script tags with just one call to replace

markup.replace(/<(\/?script)>/gi, '&lt;$1&gt;');

gi flags make the regular expression case insensitive (i) and global (g), so it can replace multiple instances of the pattern.

? makes the previous character optional, in this case it can match "<script>" and "</script>"