Regex for HTML outside markdown

to check whether some HTML exists outside a markdown code block

by Sid Vishnoi

HTML

<h3>Each textarea contains markdown. </h3>

Regex: /<input type="text" id="re" placeholder="Enter your regex here" value="<([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>(.*?)<\/\1>"/>/igm <button id="re_submit">Test</button>
<br/><br/>

<textarea class="txt" id="txt1">
```
this should be **green**
<span>some html in markdown code block 1</span>
```
</textarea>
<textarea class="txt" id="txt2">
this should be **green**
``` html
<span>some html in markdown code block 2
</span>
```
</textarea>
<textarea class="txt" id="txt3">
this should be **red**
<span>some html outside markdown block 3
</span>
</textarea>

<textarea class="txt" id="txt4">
this should be **red**.
<span>some html outside markdown block 4</span>
```
<span>some html in markdown code block 4</span>
```
</textarea>

<textarea class="txt" id="txt5">
this should be **red**
<span>some html tag outside code block 5</span>
<div>some more multiline html code outside 5
</div>
``` someLanguageCode
<span>some html inside markdown code block 5</span>
```
</textarea>

CSS

textarea.txt {
  width: 45%;
  min-height:200px;
}
textarea.valid {
  background:green;
}
textarea.invalid {
  background: red;
}

#re {
  min-width: 60%;
}

JavaScript

function test(){
  var regex = new RegExp(document.getElementById('re').value, 'igm');
  /*
  regex for html tag (single line) match :
  <([a-zA-Z][a-zA-Z0-9]*)\b[^>]*>(.*?)<\/\1>
  */

  var textarea = document.querySelectorAll('textarea.txt');

  for (var i = 0; i < textarea.length; ++i){
  	var rmatch = textarea[i].value.match(regex)
    if (rmatch != null){
      textarea[i].classList.remove("valid");
      textarea[i].classList.add("invalid")
    }else {
      textarea[i].classList.remove("invalid");
      textarea[i].classList.add("valid");
    }
  }
}

document.getElementById('re_submit').onclick = function(){
	test()
}