Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to check if a string is html or not using JavaScript?
When working with dynamic HTML content in JavaScript, it's crucial to validate HTML strings before inserting them into the DOM. Invalid HTML can break your webpage structure or cause rendering issues.
This article explores two reliable methods to check if a string contains valid HTML using JavaScript.
Using Regular Expression to Validate HTML
Regular expressions provide a powerful way to match HTML patterns. We can create a regex pattern that identifies valid HTML tags with proper opening and closing structure.
Syntax
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/; let isValid = regexForHTML.test(string);
Regex Pattern Explanation
The regular expression breaks down into three main parts:
<([A-Za-z][A-Za-z0-9]*)\b[^>]*> ? Matches the opening tag: starts with '<', followed by alphabetic/numeric characters, and ends with '>'
(.*?) ? Matches any content between opening and closing tags (non-greedy match)
<\/\1> ? Matches the closing tag: '</' followed by the same tag name as captured in group 1, ending with '>'
Example
<html>
<body>
<h3>Using <i>regular expression</i> to validate HTML strings</h3>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// Creating the regular expression for HTML validation
let regexForHTML = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
let string1 = "<b>Hello users!</b>";
let string2 = "<Hi there!>";
function validateHTMLString(string) {
let isValid = regexForHTML.test(string);
if (isValid) {
output.innerHTML += "'" + string + "' is a valid HTML string<br/>";
} else {
output.innerHTML += "'" + string + "' is not a valid HTML string<br/>";
}
}
validateHTMLString(string1);
validateHTMLString(string2);
</script>
</body>
</html>
'<b>Hello users!</b>' is a valid HTML string '<Hi there!>' is not a valid HTML string
Using NodeType Property Method
This approach creates a temporary DOM element, inserts the string as innerHTML, then checks if all child nodes are valid HTML elements using the nodeType property.
How It Works
HTML elements have a nodeType value of 1. Text nodes have nodeType 3. By checking nodeType values, we can determine if the string produces valid HTML elements.
Syntax
var element = document.createElement("div");
element.innerHTML = string;
var childNodes = element.childNodes;
// Check if all child nodes are HTML elements (nodeType === 1)
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType !== 1) {
return false; // Invalid HTML
}
}
return true; // Valid HTML
Example
<html>
<body>
<h3>Using <i>nodeType property</i> to validate HTML strings</h3>
<div id="output"></div>
<script>
let output = document.getElementById("output");
let string1 = "<b>This is valid HTML!</b>";
let string2 = "<Hi there!";
function validateHTMLString(string) {
var element = document.createElement("div");
element.innerHTML = string;
var childNodes = element.childNodes;
// Check if string produces any child nodes
if (childNodes.length === 0) {
output.innerHTML += "'" + string + "' is not valid HTML<br/>";
return;
}
// Check each child node
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].nodeType !== 1) {
output.innerHTML += "'" + string + "' is not valid HTML<br/>";
return;
}
}
output.innerHTML += "'" + string + "' is valid HTML<br/>";
}
validateHTMLString(string1);
validateHTMLString(string2);
</script>
</body>
</html>
'<b>This is valid HTML!</b>' is valid HTML '<Hi there!' is not valid HTML
Comparison
| Method | Performance | Accuracy | Complexity |
|---|---|---|---|
| Regular Expression | Fast | Good for simple HTML | Low |
| NodeType Property | Moderate | More comprehensive | Medium |
Conclusion
Both methods effectively validate HTML strings. Regular expressions offer simplicity and speed for basic validation, while the nodeType approach provides more comprehensive validation by leveraging the browser's HTML parser.
8K+ Views
