How to remove a script tag from an HTML string in JavaScript

In modern web development, JavaScript is an integral part of the workflow. It is extensively used to provide interactivity, structure, API integration and even render the layouts. It’s added in an HTML page using the <script> tag. These script tags add JS code to our page. While <script>  tags can be added anywhere in a website, the norm is adding it in <head> or just before the <body> . We need to be careful using the <script> tags as uny unintended usage can affect the performance of your website and in some even make it vulnerable to external attacks.  In this article, we take a look at how to remove a <script> tag from HTML string in JavaScript.

But before diving into the methods through which can remove the script tags, let’s briefly discuss about these tags and their functionality.

What is a <script> tag

Like I mentioned earlier, <script> tags are used to add JavaScript code to a website. There are two ways this tag can be used to add JavaScript, add JS code inline or link to an external file. Let’s take a look at them through an example –

Adding JS code inline

Consider you have an HTML file index.html  with the following structure –

. In order to add JavaScript code inline,  add <script>  tag, add your JS code and end it with a closing </script>  tag like so –

This is a simple JavaScript snippet adding two numbers. Note that we added this snippet right before the </body>  closing tag. In case the JS code impacts the HTML of the page, it will need to be added in <head>  tags.

Link to and external file

While this method works for small snippets, in case we have large JS, we can create a separate file and link to it using the <script>  tag.

Let’s take the previous example, but this time add the code in a new file custom.js

Now, in order to link to this file, we add the <script> tag in index.html file like s0–

 

Here, we added the <script> tag in <head>  tag. We are going to get the same result in the console log. Note that we used the src attribute to provide a link to the JS file. This link can be absolute as well as relative to the index.html  file.

<script> tag support a range of different attributes which I’ll not go in detail since it’s out of scope of this article but if you are interested, you can check them out in the tag's documentation .

Now that we have discussed briefly about the <script> tag, let’s see how we can remove a <script> tag from an HTML string in JavaScript.

How to remove <script> tag from an HTML string in JavaScript

There are a few methods we can use to filter out <script> tags in HTML which we are going to discuss here. So, let’s get started.

The remove() method

The first method we use to remove a <script>  tag or any tag for that matter from an HTML code block is the remove() method. We target the element directly and then remove it using the remove()  method. Consider the following HTML code –

We are going to use the remove()  method to remove the <script>  tag from this HTML code block. Add the following code to your JS file –

The code is pretty straight forward. First, we select our code block and assign it myHTML . Then, we gt an array of all the <script>  tags using querySelectorAll() method and assign it to scriptTags  variable. Finally, we remove all the tags by looping over the tags and applying the remove() method. We can verify this by outputting the final value in console –

The replace() method

JavaScript offers replace() and replaceAll()  methods which we can use to remove a <script>  tag from a string. Let’s consider the following HTML –

Here, we have .my-html div element with content enclosed in <p> tags. Note that in between the content, there is a <script> tag that is executing some unwanted JS code. To remove this <script>  tag using the replace()  method, let’s add some JS code. You can either use the inline method or link an external file for JS, it’s up to you.

In the code above, we first select the HTML inside our .my-html element. Then ,we use replace() method to replace a <script>  tag with "" . For replacing multiple <script> tags, we can use the replaceAll() method. Note that the result would retain the white space and returns of our HTML. While this would not cause any issues with further operation of our filtered HTML, you can remove these using appropriate JS methods.

Note that we use /gs flag for our regular expression. It is required to operate on  multiline <script>  tag.

A variation of the replace()  method is the matchAll() method. In this case, we are only able to grab the instances of the <script>  tag but not remove them directly.

The DOMParser() interface

Another method which we can use to remove <script> tags from HTML strings is by utilizing the DOMParser() interface. Let’s take the same HTML code from the previous example –

DOMParser Interface provides the ability to parse HTML or XML source code into a DOM Document. Add the following code in your JS file –

The code is pretty self-explanatory. Initially, we grabbed the HTML element in which we want to remove the <script> tags. Then, we initialized the DOMParser interface (line 4) and parsed our HTML using parseFromString() method (line 6).

Then we get all the <script>  tags present in our parsed HTML block (line 8) and remove them (line 10). After removing the <script>  tags, we store the filtered HTML in newHTML variable.

If we try to “console.log” the newHTML variable, we get our initial HTML without the <script>  tag –

Conclusion

So, these were some of the ways in which we could remove a script tag from an HTML string in JavaScript. Undoubtedly, this is not an exhaustive list be any means and there may be many other ways through which we can remove <script> tags from from our  HTML code. But these are some of the most generic and popular ones.

Hope you guys learnt something new in this article. If you liked it, do take a look at some of our other articles on our blog. Also, son’t forget to check out our collection of amazing WordPress themes. See you in the next article!

Meet the Author

Divjot Singh

Divjot is an experienced WordPress developer and technical writer with more than a decade of experience in WordPress Development. Whenever he's not creating amazing WordPress experiences, he can be found on the road with his bike.

Meet the Author

Divjot Singh

Divjot is an experienced WordPress developer and technical writer with more than a decade of experience in WordPress Development. Whenever he's not creating amazing WordPress experiences, he can be found on the road with his bike.

Leave a Reply

Your email address will not be published. Required fields are marked *