Code & Markup · In-Browser Regular Expression Lab

HTML Tags Regex — Match Opening, Closing & Self-Closing HTML Tags

Matches HTML markup tags for sanitization, stripping, or token extraction.

Pattern:

Regular Expression Pattern & Flags

Flags:

//g

Live Test String

Match Found

Load Sample:

Match Inspection & Details1 match

Match #1:<p>

Test Samples Verification Matrix

Expected Valid Samples (Should Match)

<p> Pass

<div class="hero" id="main"> Pass

</span> Pass

<img src="logo.png" alt="Logo" /> Pass

Expected Invalid Samples (Must Reject)

hello world Rejected (Pass)

5 < 10 Rejected (Pass)

x > y Rejected (Pass)

Code Implementation Generator

// JavaScript / TypeScript (ES6+)
const pattern = /<\/?[a-zA-Z][a-zA-Z0-9]*(?:\s+[^>]*?)?\/?>/g;
const text = "<p>";

const isMatch = pattern.test(text);
console.log("Is Match:", isMatch);

if (isMatch) {
  const matches = text.match(pattern);
  console.log("Matches:", matches);
}

Regular Expression Token Breakdown

Finds opening tags `<div class='x'>`, closing tags `</div>`, and self-closing tags `<img />`. Each component of the regular expression serves a distinct syntactical purpose as mapped below:

Token Pattern	Name / Component	Function & Rule
<\/?	Tag start	Matches < or </.
[a-zA-Z][a-zA-Z0-9]*	Tag name	Tag name starting with a letter.
(?:\s+[^>]*?)?	Attributes	Optional whitespace and attribute pairs.
\/?>	Tag close	Matches > or />.