How to check if a string is html or not using JavaScript?

The task is to validate whether the given string is valid HTML or not using JavaScript. we’re going to discuss few techniques.

Approach

Get the HTML string into a variable.
Create a RegExp which checks for the validation.
RegExp should follow the rules of creating a HTML document.

Example 1: In this example, a regexp is created and it is validating the HTML string as valid.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Check if a string is html or not. 
    </title> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;" 
        id="h1">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var str1 = '<div>GeeksForGeeks</div>'; 
        var str = '<div>GeeksForGeeks</div>'; 
        
        up.innerHTML = "Click on the button to check "+ 
          "for the valid HTML.<br> String - " + str1; 
        
        var down = document.getElementById('GFG_DOWN'); 
  
        function GFG_Fun() { 
            down.innerHTML =  
/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(str); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Example 2: In this example, Here also, A regexp is created and it is validating the HTML string as invalid.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        JavaScript  
      | Check if a string is html or not. 
    </title> 
</head> 
  
<body style="text-align:center;" 
      id="body"> 
    <h1 style="color:green;" 
        id="h1">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        click here 
    </button> 
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var str1 = '<div>GeeksForGeeks</dv>'; 
        var str = '<div>GeeksForGeeks</dv>'; 
        
        up.innerHTML = "Click on the button to check "+ 
          "for the valid HTML.<br> String - " + str1; 
        
        var down = document.getElementById('GFG_DOWN'); 
  
        function GFG_Fun() { 
            down.innerHTML =  
 /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(str); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: