149

I have a certain string for which I want to check if it is a html or not. I am using regex for the same but not getting the proper result.

I validated my regex and it works fine here.

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)</\1>");
return htmlRegex.test(testString);

Here's the fiddle but the regex isn't running in there. http://jsfiddle.net/wFWtc/

On my machine, the code runs fine but I get a false instead of true as the result. What am missing here?

9
  • 7
    Use an HTML parser to parse HTML. Please read this if you haven't already. Commented Mar 17, 2013 at 8:25
  • 3
    the question keep coming, there should be a stack bot that will aoutmatically set a comment on every question with html and regex in it Commented Mar 17, 2013 at 8:26
  • 3
    It kinda depends on what level of sophistication you want from the check. You could check if the string contains at least one < and at least one > and call it HTML, or you could check that it is strictly valid with correct HTML syntax, or anything from between. For the simplest of cases a HTML parser is not necessary.
    – JJJ
    Commented Mar 17, 2013 at 8:30
  • 3
    Why do you check a string is HTML?
    – nhahtdh
    Commented Mar 17, 2013 at 8:31
  • 2
    @user1240679: Valid markup format? What kind of validity? In the strictest sense, you need DTD to describe it. In a loose sense, you may want to check that the tags are matched up properly. Either of the 2 cases above are not job for regex.
    – nhahtdh
    Commented Mar 17, 2013 at 8:36

19 Answers 19

421

A better regex to use to check if a string is HTML is:

/^/

For example:

/^/.test('') // true
/^/.test('foo bar baz') //true
/^/.test('<p>fizz buzz</p>') //true

In fact, it's so good, that it'll return true for every string passed to it, which is because every string is HTML. Seriously, even if it's poorly formatted or invalid, it's still HTML.

If what you're looking for is the presence of HTML elements, rather than simply any text content, you could use something along the lines of:

/<\/?[a-z][\s\S]*>/i.test()

It won't help you parse the HTML in any way, but it will certainly flag the string as containing HTML elements.

19
  • 123
    I'm honestly surprised I didn't get more downvotes for the snark.
    – zzzzBov
    Commented Mar 17, 2013 at 17:56
  • 11
    @clenemt, so you consider a < b && a > c to be HTML?
    – zzzzBov
    Commented Feb 4, 2015 at 14:20
  • 2
    @oriadam, the context was for detecting elements in that case. If you use a < b && a > c the browser will turn the > and < characters into &gt; and &lt; entities appropriately. If, instead, you use a<b && a>c the browser will interpret the markup as a<b && a>c</b> because the lack of a space means that <b opens a <b> element. Here's a quick demo of what I'm talking about.
    – zzzzBov
    Commented Mar 15, 2016 at 17:24
  • 26
    This is probably the highest voted troll answer I've seen on so. ;)
    – aandis
    Commented Jan 20, 2019 at 17:17
  • 6
    Got a downvote from me, alas, and I bathe in snark. There are two different questions, seemingly both being answered, when they are quite distinct. "Does this text contain HTML markup of any kind" → "does it contain <[a-zA-Z] followed eventually by a >", and there you go. Second: is the string an HTML document? Does it start with <!DOCTYPE html>? Because: <!DOCTYPE html><title>Yes, really.</title><p>This is everything you need for a fully valid, complete HTML document.
    – amcgregor
    Commented Feb 5, 2020 at 13:55
110

Method #1. Here is the simple function to test if the string contains HTML data:

function isHTML(str) {
  var a = document.createElement('div');
  a.innerHTML = str;

  for (var c = a.childNodes, i = c.length; i--; ) {
    if (c[i].nodeType == 1) return true; 
  }

  return false;
}

The idea is to allow browser DOM parser to decide if provided string looks like an HTML or not. As you can see it simply checks for ELEMENT_NODE (nodeType of 1).

I made a couple of tests and looks like it works:

isHTML('<a>this is a string</a>') // true
isHTML('this is a string')        // false
isHTML('this is a <b>string</b>') // true

This solution will properly detect HTML string, however it has side effect that img/vide/etc. tags will start downloading resource once parsed in innerHTML.

Method #2. Another method uses DOMParser and doesn't have loading resources side effects:

function isHTML(str) {
  var doc = new DOMParser().parseFromString(str, "text/html");
  return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
}

Notes:
1. Array.from is ES2015 method, can be replaced with [].slice.call(doc.body.childNodes).
2. Arrow function in some call can be replaced with usual anonymous function.

10
  • 4
    This's an awesome idea. However, this function could not detect closing tag (i.e. isHTML("</a>") --> false).
    – Lewis
    Commented Apr 2, 2014 at 18:11
  • 12
    Great solution!.. The only negative side-affect of is that if your html contains any static resources like an image src attribute.. innerHTML will force the browser to start fetching those resources. :( Commented Jul 2, 2014 at 9:46
  • 1
    @JoseBrowne even if it's not appended to the DOM?
    – kuus
    Commented Jan 29, 2017 at 20:15
  • 2
    @kuus Yes, even if not appending. Use DOMParser solution.
    – dfsq
    Commented Jan 29, 2017 at 20:21
  • 1
    Good idea, but wouldn't the accepted answer be better for performance? Especially if you have huge strings (pun intended) or if you have to use this test a lot.
    – DerpyNerd
    Commented Oct 4, 2019 at 11:30
23

Here's a sloppy one-liner that I use from time to time:

var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);

It will basically return true for strings containing a < followed by SOMETHING followed by >.

By SOMETHING, I mean basically anything except an empty string.

It's not great, but it's a one-liner.

Usage

isHTML('Testing');               // false
isHTML('<p>Testing</p>');        // true
isHTML('<img src="hello.jpg">'); // true
isHTML('My < weird > string');   // true (caution!!!)
isHTML('<>');                    // false
isHTML('< >');                   // true (caution!!!)
isHTML('2 < 5 && 5 > 3');        // true (caution!!!)

As you can see it's far from perfect, but might do the job for you in some cases.

2
  • 1
    that's a lovely one-liner... never considered .test.bind Commented Dec 29, 2022 at 12:32
  • Can anyone explain this line of code?
    – mkvakin
    Commented Mar 13, 2023 at 5:15
17

A little bit of validation with:

/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i.test(htmlStringHere) 

This searches for empty tags (some predefined) and / terminated XHTML empty tags and validates as HTML because of the empty tag OR will capture the tag name and attempt to find it's closing tag somewhere in the string to validate as HTML.

Explained demo: http://regex101.com/r/cX0eP2

Update:

Complete validation with:

/<(br|basefont|hr|input|source|frame|param|area|meta|!--|col|link|option|base|img|wbr|!DOCTYPE).*?>|<(a|abbr|acronym|address|applet|article|aside|audio|b|bdi|bdo|big|blockquote|body|button|canvas|caption|center|cite|code|colgroup|command|datalist|dd|del|details|dfn|dialog|dir|div|dl|dt|em|embed|fieldset|figcaption|figure|font|footer|form|frameset|head|header|hgroup|h1|h2|h3|h4|h5|h6|html|i|iframe|ins|kbd|keygen|label|legend|li|map|mark|menu|meter|nav|noframes|noscript|object|ol|optgroup|output|p|pre|progress|q|rp|rt|ruby|s|samp|script|section|select|small|span|strike|strong|style|sub|summary|sup|table|tbody|td|textarea|tfoot|th|thead|time|title|tr|track|tt|u|ul|var|video).*?<\/\2>/i.test(htmlStringHere) 

This does proper validation as it contains ALL HTML tags, empty ones first followed by the rest which need a closing tag.

Explained demo here: http://regex101.com/r/pE1mT5

3
  • 1
    Just a note the bottom regex does work but it won't detect unclosed html tags such as "'<strong>hello world". granted this is broken html therefore should be treated as a string but for practical purposes your app may want to detect these too.
    – user967451
    Commented Sep 21, 2016 at 19:39
  • 1
    HTML is designed with the forgiveness of user-agents in mind. "Invalid" tags are not invalid, they're just unknown, and permitted. "Invalid" attributes are not invalid… This is particularly notable when one begins to involve "web components" and technologies like JSX, which mix HTML and richer component descriptions, typically generating shadow DOM. Slap this in a file and eval document.querySelector('strange') — it'll work.
    – amcgregor
    Commented Feb 27, 2020 at 16:46
  • (To summarize: due to how the specification is written, attempting to "validate" HTML markup is essentially a fool's errand. The link given to a sample HTML document with an "invalid" element, there, is a 100% fully-formed, complete HTML document—and has been since 1997—as another example.)
    – amcgregor
    Commented Feb 27, 2020 at 16:49
13

zzzzBov's answer above is good, but it does not account for stray closing tags, like for example:

/<[a-z][\s\S]*>/i.test('foo </b> bar'); // false

A version that also catches closing tags could be this:

/<[a-z/][\s\S]*>/i.test('foo </b> bar'); // true
2
  • Could have been better to suggest an edit, instead of posting this as a comment. Commented Sep 13, 2016 at 9:27
  • 1
    I think you mean <[a-z/][\s\S]*> - note the slash in the first group.
    – Ryan Guill
    Commented May 9, 2017 at 17:38
8

All of the answers here are over-inclusive, they just look for < followed by >. There is no perfect way to detect if a string is HTML, but you can do better.

Below we look for end tags, and will be much tighter and more accurate:

import re
re_is_html = re.compile(r"(?:</[^<]+>)|(?:<[^<]+/>)")

And here it is in action:

# Correctly identified as not HTML:
print re_is_html.search("Hello, World")
print re_is_html.search("This is less than <, this is greater than >.")
print re_is_html.search(" a < 3 && b > 3")
print re_is_html.search("<<Important Text>>")
print re_is_html.search("<a>")

# Correctly identified as HTML
print re_is_html.search("<a>Foo</a>")
print re_is_html.search("<input type='submit' value='Ok' />")
print re_is_html.search("<br/>")

# We don't handle, but could with more tweaking:
print re_is_html.search("<br>")
print re_is_html.search("Foo &amp; bar")
print re_is_html.search("<input type='submit' value='Ok'>")
5

If you're creating a regex from a string literal you need to escape any backslashes:

var htmlRegex = new RegExp("<([A-Za-z][A-Za-z0-9]*)\\b[^>]*>(.*?)</\\1>");
// extra backslash added here ---------------------^ and here -----^

This is not necessary if you use a regex literal, but then you need to escape forward slashes:

var htmlRegex = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/;
// forward slash escaped here ------------------------^

Also your jsfiddle didn't work because you assigned an onload handler inside another onload handler - the default as set in the Frameworks & Extensions panel on the left is to wrap the JS in an onload. Change that to a nowrap option and fix the string literal escaping and it "works" (within the constraints everybody has pointed out in comments): http://jsfiddle.net/wFWtc/4/

As far as I know JavaScript regular expressions don't have back-references. So this part of your expression:

</\1>

won't work in JS (but would work in some other languages).

3
4

With jQuery:

function isHTML(str) {
  return /^<.*?>$/.test(str) && !!$(str)[0];
}
4
  • 2
    isHTML("<foo>"); // returns true isHTML("div"); // returns true if there are divs on the page Commented Jan 13, 2014 at 19:46
  • @yekta - What are you taking about? This is supposed to check wether the string is html or not. An email is not an html tag as far as I know... isHTML('[email protected]') -> false // correct
    – gtournie
    Commented May 19, 2016 at 19:02
  • 1
    A string can be anything, if you know its an HTML tag then why check if its HTML in the first place, I don't quite follow your point. The @ is not a valid syntax for a selector. Thus when you pass it to a jQuery selector, it will throw an exception (i.e. $("[email protected]") from !!$(str)[0]). I'm specifically referring to the !!$(str)[0] portion. You just edited your answer, but now you're checking for HTML before jQuery does anything.
    – yekta
    Commented May 19, 2016 at 20:42
  • I don't think the author wanted to check if it was just a string. That's the point. What he wanted was a function able to check if the string was a valid HTML tag, not just HTML (otherwise this is a bit stupid). I updated my answer after I read @ACK_stoverflow comment, but I'm sure a simple regex should do it.
    – gtournie
    Commented May 19, 2016 at 22:07
3

/<\/?[^>]*>/.test(str) Only detect whether it contains html tags, may be a xml

1
  • 27 is < 42, and 96 > 42. This is not HTML.
    – amcgregor
    Commented Aug 22, 2020 at 2:56
3

Using jQuery in this case, the simplest form would be:

if ($(testString).length > 0)

If $(testString).length = 1, this means that there is one HTML tag inside textStging.

1
  • 1
    As per the answer just below (starting with "With jQuery", written four years prior to this one!), consider the poor choice of multiple uses from a single entry point. $() is a CSS selector operation. But also a DOM node factory from textual HTML serialization. But also… as per the other answer suffering from the same dependence on jQuery, "div" is not HTML, but that would return true if any <div> elements exist on the page. This is a very, very bad approach, as I have grown to expect with almost any solution needlessly involving jQuery. (Let it die.)
    – amcgregor
    Commented Jun 24, 2020 at 16:34
3

While this is an old thread, I just wanted to share the solution I've wrote for my needs:

function isHtml(input) {
    return /<[a-z]+\d?(\s+[\w-]+=("[^"]*"|'[^']*'))*\s*\/?>|&#?\w+;/i.test(input);
}

It should cover most of the tricky cases I've found in this thread. Tested on this page with document.body.innerText and document.body.innerHTML.

I hope it will be useful for someone. :)

2
  • Seems over-specific or attempting to more explicitly validate the HTML. <input disabled> may be problematic as attributes without quoted values are perfectly acceptable, making this expression wrong. HTML is a permissive, not strict process, with my answer providing a more functionally complete (if eager) matching pattern. Test failures, not just success. 😉
    – amcgregor
    Commented Oct 5, 2021 at 9:23
  • Worked perfect for me thanks! Commented Oct 20, 2021 at 2:56
1

Since the original request is not say the solution had to be a RegExp, just that an attempt to use a RegExp was being made. I will offer this up. It says something is HTML if a single child element can be parsed. Note, this will return false if the body contains only comments or CDATA or server directives.

const isHTML = (text) => {
  try {
    const fragment = new DOMParser().parseFromString(text,"text/html");
    return fragment.body.children.length>0
  } catch(error) { ; }  
  return false;
}
1

The best way to check use Function below as utils

const containsHTML = (str: string) => /<[a-z][\s\S]*>/i.test(str);
0

My solution is

const element = document.querySelector('.test_element');

const setHtml = elem =>{
    let getElemContent = elem.innerHTML;

    // Clean Up whitespace in the element
    // If you don't want to remove whitespace, then you can skip this line
    let newHtml = getElemContent.replace(/[\n\t ]+/g, " ");

    //RegEX to check HTML
    let checkHtml = /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(getElemContent);

    //Check it is html or not
    if (checkHtml){
        console.log('This is an HTML');
        console.log(newHtml.trim());
    }
    else{
        console.log('This is a TEXT');
        console.log(elem.innerText.trim());
    }
}

setHtml(element);
1
0

You can also try this simple solution.

window.isHTML=(content)=>{
    let elem = document.createElement('p');
    elem.innerHTML = content;
    return elem.children.length > 0;
}

isHTML('hello') //false
isHTML('<p>hello</p>') //true
isHTML('<p>hello</p> world') //true
-1

There is an NPM package is-html that can attempt to solve this https://github.com/sindresorhus/is-html

6
  • I do not comprehend the expression it is attempting to use which fails except on the declared doctype, and the "full" pattern constructed from known HTML elements pulled in from an additional dependency ignores the fact that that's not how HTML works, and hasn't been for a very, very long time. Additionally, the base pattern explicitly mentions <html> and <body> tags, both of which are entirely optional. The "not match XML" test is telling.
    – amcgregor
    Commented May 15, 2020 at 14:54
  • @amcgregor if you think your solution is better maybe contribute to the isHTML repo? and add your suite of tests from regex101? it would be valuable to the community
    – Colin D
    Commented May 18, 2020 at 17:22
  • The fundamental purpose of that library is misguided and will inherently be wrong in a large number of cases, usually by false-flagging as not-HTML due to the presence of tags it does not understand; validation can not succeed this way. Additionally, a simple regex or a (edit: pair of) librar[ies]… we may have forgotten how to program, and Node/NPM is not a language or toolchain I generally wish to utilize, contribute to, or encourage the use of.
    – amcgregor
    Commented May 19, 2020 at 19:06
  • Alright amcgergor, you are being pretty negative to me when I was just trying to help. I disagree with the premise of npm being misguided. Imagine your stack overflow answer came up with a small tweak in the future. I, as a developer using your library, would just upgrade, and I would get more proper behavior. Instead, I have to....live with the broken behavior or revisit this stack overflow answer to get your edits? That is the alternative universe
    – Colin D
    Commented May 19, 2020 at 20:18
  • Negative? I was explaining my stance and why I would not be doing what would otherwise seem a sensible thing. Note, however, that the article I linked was the follow-on from a slightly more inflammatory first (linked up-front) which generated plenty of discussion. He published a technical paper, also linked there, towards the bottom. I counter your gut feeling about re-work with evidence about quality. Ref: §7.2 (& the left-pad disaster & eslint)
    – amcgregor
    Commented May 19, 2020 at 20:28
-1

I needed something similar for xml strings. I'll put what I came up with here in case it might be useful to anyone..

static isXMLstring(input: string): boolean {
    const reOpenFull = new RegExp(/^<[^<>\/]+>.*/);
    const reOpen = new RegExp(/^<[^<>\/]+>/);
    const reCloseFull = new RegExp(/(^<\/[^<>\/]+>.*)|(^<[^<>\/]+\/>.*)/);
    const reClose = new RegExp(/(^<\/[^<>\/]+>)|(^<[^<>\/]+\/>)/);
    const reContentFull = new RegExp(/^[^<>\/]+.*/);
    const reContent = new RegExp(/^[^<>&%]+/); // exclude reserved characters in content

    const tagStack: string[] = [];

    const getTag = (s: string, re: RegExp): string => {
      const res = (s.match(re) as string[])[0].replaceAll(/[\/<>]/g, "");
      return res.split(" ")[0];
    };

    const check = (s: string): boolean => {
      const leave = (s: string, re: RegExp): boolean => {
        const sTrimmed = s.replace(re, "");
        if (sTrimmed.length == 0) {
          return tagStack.length == 0;
        } else {
          return check(sTrimmed);
        }
      };

      if (reOpenFull.test(s)) {
        const openTag = getTag(s, reOpen);
        tagStack.push(openTag); // opening tag
        return leave(s, reOpen);
      } else if (reCloseFull.test(s)) {
        const openTag = tagStack.pop();
        const closeTag = getTag(s, reClose);
        if (openTag != closeTag) {
          return false;
        }
        // closing tag
        return leave(s, reClose);
      } else if (reContentFull.test(s)) {
        if (tagStack.length < 1) {
          return false;
        } else {
          return leave(s, reContent); // content
        }
      } else {
        return false;
      }
    };

    return check(input);
  }
-1

Here's a regex-less approach I used for my own project.

If you are trying to detect HTML string among other non-HTML strings, you can convert to an HTML parser object and then back to see if the string lengths are different. I.e.:

An example Python implementation is as follows:

def isHTML(string):
    string1 = string[:]
    soup = BeautifulSoup(string, 'html.parser')  # Can use other HTML parser like etree
    string2 = soup.text

    if string1 != string2:
        return True
    elif string1 == string2:
        return False

It worked on my sample of 2800 strings.

The pseudocode would be

define function "IS_HTML"
  input = STRING
  set a copy of STRING as STRING_1
  parse STRING using an HTML parser and set as STRING_2
  IF STRING_1 is equal to STRING_2
  THEN RETURN TRUE
  ELSE IF STRING_1 is not equal to STRING_2
  THEN RETURN FALSE

This worked for me in my test case, and it may work for you.

1
  • I guess you'd better mark somewhere that this is python solution (while question is about JS) Commented Jul 28, 2021 at 14:55
-1

The most voted answer validates the following string as a HTML pattern when it obviously isn't:

true = (b<a || b>=a)

A better approach would be <([a-zA-Z]+)(\s*|>).*(>|\/\1>) which can be visualized here.

See also the HTML Standard for further information.

This pattern is not going to validate your HTML document but rather a HTML tag. Obviously there is still room for improvements, the more you improve it the sooner you get a very-huge-complex HTML validation pattern, something you would want to avoid.

Example:

<t>
<a >
<g/>
<tag />
<tag some='1' attributes=2 foo >...
<tag some attributes/>
<tag some attributes/>...</tagx>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.