How can I remove the (//) blocks; tags inside a script element in Javascript?


CDATA, the short form of Character Data is a block of code that has been written to prevent parsing by the parser. Sometimes our data includes predefined characters like “<” and “&” which are not meant to be parsed by the XML or HTML so we wrap them inside the CDATA block. You can refer to this article to learn more about CDATA.

To remove the CDATA block from a script tag using JavaScript, we have the following approches.

  • Using the Regex
  • By using the ReplaceAll Method

Using the Regex

The regex is a pattern of characters that is used for matching and replacing actions on any text. To find and remove the CDATA block we use the following regex pattern and use the String.replace( ) method.

Regex

/<!\[CDATA\[[\s\S]*?\s*\]\]>/g

Syntax

str.replace("regex", "")

Here str is the string from which you want to remove the CDATA, regex is the regular expression to find the block data.

Example

In the below program example, we remove the CDATA blocks and tags inside a script element using the String replace() method. We pass the regex defined above as an argument to the replace() method and the second argument is an empty string.

<html> <body> <h2> Program to remove the (// <![CDATA[ , //]]>) blocks; tags inside a script element in JavaScript </h2> <script> let text = `<script type="text/javascript"> <![CDATA[ var A=new Array(); .......................... .......................... ]]> </script> some text2 ........................ some text3 ........................ some text4 ........................ <script type="text/javascript"> <![CDATA[ var B=new Array(); .......................... .......................... ]]> <script> some text5 ........................` text = text.replace(/<!\[CDATA\[[\s\S]*?\s*\]\]>/g, "") document.write(text) </script> </body> </html>

Using the replaceAll Method

In this approach we will be using the String.replaceAll() method, this method replaces all the occurrences of the given string. This method takes two arguments the first one is the pattern or string which is going to be searched and the second argument is the string from which the given string will be replaced. Here we will replace all the occurrences of <![CDATA[ and ]]> with an empty string. But you should keep in mind that we cannot remove the content of the CDATA, we can only remove the CDATA tags.

Syntax

string.replaceAll("str", "")

Here the string is the script block string and the str is the <![CDATA[ and ]]>respectively.

Example

In the below program example, we remove the CDATA blocks and tags inside a script element using the String replaceAll() method. We pass the regex defined above as an argument to the replaceAll() method and the second argument is an empty string.

<html> <body> <h2> Program to remove the (// <![CDATA[ , //]]>) blocks; tags inside a script element in JavaScript </h2> <script> let text = `<script type="text/javascript"> <![CDATA[ var A=new Array(); .......................... .......................... ]]> </script> some text2 ........................ some text3 ........................ some text4 ........................ <script type="text/javascript"> <![CDATA[ var B=new Array(); .......................... .......................... ]]> <script> some text5 ........................` text = text.replaceAll("<![CDATA[", "") text = text.replaceAll("]]>", "") document.write(text) </script> </body> </html>

In this tutorial, we have discussed two approaches to removing the CDATA block from the given script element. We recommend you to use the first approach because in the second approach you cannot remove the content inside the CDATA block. If you want to just remove the CDATA tag, then you can go with the second approach.

Updated on: 11-Aug-2022

516 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements