JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<textarea><div style="margin:37px;">div</div>
<span title=" style="margin:37px;" />span1</span>
<span title="" style="margin:37px;" />span2</span>
<a title="u" title="j">link</a>
<a title=""href="" alt="" required>test</a>
<img src="" data-abc="" required>
<input type=""style="" /></textarea>
<hr>
<strong>Result:</strong><br>
<textarea id="result"></textarea>

CSS

textarea{
  width:500px;
  height:120px;
}
#result{
  border-top:1px dashed black;
  border-bottom:1px dashed black;
  background-color: #EFE;
  height:200px;
}

JavaScript

var textarea = document.querySelector('textarea'),
	content = textarea.textContent,
  result = document.getElementById('result');

content = content.split("\n");

check();

function check(){
	var output = '';
  for (var i = 0; i < content.length; i++) {
    output += checkElement(content[i]) + "\n\n";
  }
  output = output.trim();
  result.innerText = output;
}

function checkElement(theElement){
	var rgx = /<([a-z]+)(\s+[a-z\-]+(="[^"]*")?)*\s*\/?>([^<]+(<\/$1>))?/i;
  if(theElement.match(rgx)){
  	return theElement + ' correct';
  } else {
    return theElement + ' incorrect';
  }
}