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 –
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <head> <title>Mt Webpage</title> </head> <body> Lorem Ipsum Dolar Sit Amet </body> </html> |
. In order to add JavaScript code inline, add <script> tag, add your JS code and end it with a closing </script> tag like so –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <head> <title>Mt Webpage</title> </head> <body> Lorem Ipsum Dolar Sit Amet <script> const addNumbers = (a,b) => { return a + b; } const result = addNumbers(2, 3); console.log(result); </script> </body> </html> // Output in console : 5 |
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 –
|
1 2 3 4 5 |
const addNumbers = (a,b) => { return a + b; } const result = addNumbers(2, 3); console.log(result); |
Now, in order to link to this file, we add the <script> tag in index.html file like s0–
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <head> <title>My Webpage</title> <script src="custom.js"/> </head> <body> Lorem Ipsum Dolar Sit Amet </body> </html> |
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 –
|
1 2 3 4 5 |
<div class="my-html"> <p>Lorem ipsum dolor sit amet</p> <script>console.log('Unwanted JavaScript added here');</script> <p>Ut enim ad minim veniam</p> </div> |
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 –
|
1 2 3 |
const myHTML = document.querySelector('.my-html'); const scriptTags = myHTML.getElementsByTagName('script'); [...scriptTags].forEach(tag => tag.remove()); |
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 –
|
1 2 3 4 5 6 7 8 |
console.log(myHTML.outerHTML); // Output in Console: // <div class="my-html"> // <p>Lorem ipsum dolor sit amet</p> // // <p>Ut enim ad minim veniam</p> // </div> |
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 –
|
1 2 3 4 5 |
<div class="my-html"> <p>Lorem ipsum dolor sit amet</p> <script>console.log('Unwanted JavaScript added here');</script> <p>Ut enim ad minim veniam</p> </div> |
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.
|
1 2 3 4 5 6 7 8 9 10 |
const myHTML = document.querySelector('.my-html').outerHTML; const filteredHTML = myHTML.replace(/<script.*(\/script>)/gs, ''); console.log(filteredHTML); // Output in console: // <div class="my-html"> // <p>Lorem ipsum dolor sit amet</p> // // <p>Ut enim ad minim veniam</p> // </div> |
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 –
|
1 2 3 4 5 |
<div class="my-html"> <p>Lorem ipsum dolor sit amet</p> <script>console.log('Unwanted JavaScript added here');</script> <p>Ut enim ad minim veniam</p> </div> |
DOMParser Interface provides the ability to parse HTML or XML source code into a DOM Document. Add the following code in your JS file –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Our target HTML element with <script> tag const myHTML = document.querySelector('.my-html'); // Initializing the parser const parser = new DOMParser(); // Parsed the HTML const parsedHTML = parser.parseFromString(myHTML.outerHTML, 'text/html'); // Grabbed all the <script> tags const scriptTags = parsedHTML.getElementsByTagName('script'); // Removed them [...scriptTags].forEach(tag => tag.remove()); // Our HTML without the <script> tag const newHTML = parsedHTML.body.innerHTML; |
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 –
|
1 2 3 4 5 6 7 |
console.log(newHTML); // Output in console: // <div class="my-html"> // <p>Lorem ipsum dolor sit amet</p> // // <p>Ut enim ad minim veniam</p> // </div> |
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!
