While programming in JavaScript, we often want to write complex codes where it is very likely to add an “html” tag in a string value in case of headings or paragraphs mistakenly. For instance, the end tag of an HTML or body element should be stripped if the HTML or body element is not followed by a comment. Do not know how to strip the HTML tags from a particular string? No worries!
This manual will discuss the methods to Strip the HTML Tags from a specific String in JavaScript.
How to Strip HTML Tags From a String in JavaScript?
To strip HTML tags using JavaScript, the following approaches can be utilized:
Go through the mentioned methods one by one!
Method 1: Strip HTML Tags From String in JavaScript Using replaceAll() Method
The “replaceAll()” method returns a new string when all of the matched patterns get replaced by the specified replacement. This method can be implemented to replace all the HTML tags in a string with the empty string.
Syntax
In the given syntax, “pattern” refers to the string or an object, and “replacement” can be a function or a string.
The below example explains the concept clearly.
Example
In the following example, include a string value including HTML tags placed in the “<h1>” tag and display the unstripped string value:
console.log("Unstripped html tags:", unStripped)
Now, apply the “replaceAll()” method to replace the HTML tags with empty string specified as ” “. The “gi” here will search for all occurrences of the regular expression in the provided string, and the “regex operator” will start searching for values starting from “/” and ending at “/” respectively:
Finally, display the corresponding string value without any HTML tags:
The corresponding output will be as follows:
Method 2: Strip the HTML Tags From a String in JavaScript Using Text Content Property
The “textContent” property sets the text content of the specified element. This method can be utilized to return the text elements from the given HTML string.
Example
First, store an unstripped string value and display it as discussed in the previous method.
console.log("Unstripped html tags:", unStripped)
Next, create an element named “div” using the “document.createElement()” method and assign the created element a string value including the HTML tags:
div.innerHTML= unStripped;
Now, apply the textContent property to include text within the “<script>” element. If the string contains <script> elements, this method with textContent will return its content and strip the HTML tags using ” ” into an empty string and logging it on the console:
console.log("Stripped html tags:",text);
Output
Method 3: Strip the HTML Tags From a String in JavaScript Using DOMParser Interface
The “DOMParser” interface gives the functionality to parse HTML source code from the specified string value into a DOM. This technique can be implemented by parsing an HTML code in such a way that when a string containing HTML code is passed to it as an argument, the HTML tags can be stripped with the DOMParser and its “parseFromString()” method.
Syntax
Here, “parseFromString()” method removes the HTML tags from the string “unStripped”.
Example
Firstly, create a function named “stripTags()” with “html” as its argument.
Next, apply the parseFromString() method to remove the html tags from the specified variable named “unStripped” referring to the contained unstripped string value and return its text content using the “textContent” property:
const parseHTML= new DOMParser().parseFromString(unStripped, 'text/html');
return parseHTML.body.textContent || '';
}
Now, create a string value to be stripped and display the unstripped and stripped values on the console and compare them:
console.log("Unstripped html tags:", unStripped)
console.log("Stripped html tags:", stripTags(unStripped));
Output
Method 4: Strip HTML Tags From a String in JavaScript Using string-strip-HTML Package
The “string-strip-html” package is applied to strip HTML from a particular string and provides a “stringStripHtml()” method that carries an HTML as an input. This method can be implemented in such a way that if the particular string includes the “<script>” element, string-strip-html() will remove it along with its content.
Example
In the first step, include a string-strip-html package in the “<script>” tag:
Now, include a string value and refer it to the string value containing the “<script>” element. This will result in removing the html tags from the provided string value:
let htmlWithScriptElement= '<script>alert("Html Tags");<\/script>';
let unStripped= `<h1 class= 'header_tag'>Html <i>Tags</i> ${htmlWithScriptElement}</h1>`;
Finally, log the unstripped and stripped values and compare the resultant string values in both the scenarios:
console.log("Stripped html tags:", stripHtml(unStripped).result);
Output
We have discussed all the easiest methods to strip html tags from string in JavaScript.
Conclusion
To strip html tags from the string in JavaScript, apply the “replaceAll()” method for replacing all the html tags with an empty string, the “Text Content” property to return the text elements from the specific HTML string, the “DOMParser” interface to parse the html tags from the string or the “string-strip-HTML” package for including a package and passing an HTML string to the in-built method. This manual guided about the methods to strip html tags from string in JavaScript.
