Using jQuery to test if string contains HTML markup

Question

I want to test if a string has html tags in it.

html = "<p class=\"c\">some <span>conten<b class=\"i\">t</b></span><p><p>more content</p><p><i>important</i>";

I would think that using either find() or has() would help me do this, but it's not working.

$(html).find("p") //[]
$(html).has("p")  //[]

And I get confusing results if I experiment.

$(html).has("p") //[]
$(html).has("*") //array of <p> elements and children
$(html).has("*") == true //false
$(html).has("*").length == true //false ??

Why can't I use any of these methods to see if my string contains HTML markup?

Thanks

raina77ow · Accepted Answer · 2014-04-04 20:28:52Z

9

Both .has() and .find() operate on the given element's children nodes. To test the element itself, use .is():

$(html).is('p');   // true
$(html).is('div'); // false
$(html).is('*');   // true

... although I'm rather sceptical about the usefulness of the latter, as it doesn't test specifically for HTML elements. So this...

var someMarkup = '<foo"bar"zzz>';
$(someMarkup).is('*');

... is also true. And if you omit the last > in this expression, you won't even reach is:

var noHtmlJustLt = '<';
$(noHtmlJustLt).is('*'); // Error: Syntax error, unrecognized expression: <

... so you have to wrap this into try-catch block.

To be honest, I'd probably solve the whole task (check whether or not a string has some rogue markup) with a different approach: escape the original text with a common trick...

var newHtml = $('<div></div>').html(html).text();

... then compare it with original html contents. If there's no markup symbols, they should be equal.

edited Apr 4, 2014 at 20:28

answered Apr 4, 2014 at 20:13

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Over a year ago

ended up just doing a direct string comparison

adeneo · Accepted Answer · 2014-04-04 20:21:42Z

2

Both filter() and is() only work on the root elements, so to search the entire string for tags you'd have to set it as innerHTML of another empty element, and search that with find(), which only works on children, hence the wrapping parent element

var has_p = $('<div />', {html : html}).find("p").length > 0;

edited Apr 4, 2014 at 20:21

answered Apr 4, 2014 at 20:13

adeneo

319k29 gold badges410 silver badges392 bronze badges

5 Comments

1252748 Over a year ago

Can you explain what's happening with the '<div />' and then the comma, and then the object? I'm not familiar with that syntax

adeneo Over a year ago

It creates an empty div, and inserts the html into that div, that way all the HTML can be searched, as filter() and is() only checks the first parent node, and find() and has() only checks the children. This checks everything.

raina77ow Over a year ago

Nice approach (+1), but how exactly it's better than var $html = $(html); var has_p = $html.is('p') || $html.find('p').length > 0? )

adeneo Over a year ago

@raina77ow - Anything that works is good enough, so it's not really better, but it doesn't call two methods on two references of the collection, and it looks a lot neater without the OR.

raina77ow Over a year ago

@adeneo I see. ) Yes, it looks neater indeed.

Collectives™ on Stack Overflow

Using jQuery to test if string contains HTML markup

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related