advanced regex pattern for html5 input

Question

I can't seem to put together a working pattern to disallow all html tags except for the strong and em tag.

I don't want to parse the html but just want to give the user a warning that the input will not be accepted. I am aware that this is not supported in all browsers but I would love a pure html solution, as I already have a working JS solution, but I wan't to layer the user experience.

<input name="user_input" pattern="^(?!<[^>]*>).*$" />

So allowed tags: strong, em the use of all other tags should make the result false

Any one able to crack this one?

KR

edit:

<input type="text" pattern="((?!<(?!\/?(strong|em))[^>]*>).)*">

is what seems to do the trick. Thank you for your help!

Vasili Syrakis · Accepted Answer · 2014-02-04 03:55:51Z

1

You can use a Negative Lookahead (?!) for this purpose.

An example regex string which matches the entire pair:

<(?!\/?strong|\/?em)[^>]*>.*(?:<\/.*?>)?

A shorter regex, which matches the first tag only

<(?!\/?(strong|em))[^>]*>

This match will pass if a HTML tag with something EXCEPT strong or em exists.

So, if match = $true, you can deny the input and give the user a warning.

Regex101 demo

edited Feb 4, 2014 at 3:55

answered Feb 4, 2014 at 3:49

Vasili Syrakis

9,6912 gold badges43 silver badges59 bronze badges

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

4 Comments

Wim Over a year ago

Nice! It works like you say it does, almost there now, but I can't control the true/false comparison so everything needs to happen within the pattern. It should give false as soon as a non em or strong tag is found. This should give true: My name is name. As for example where My name is name test. Should return false

Vasili Syrakis Over a year ago

The problem with matching in that fashion, is that it will match true in this as an example: wordstest resulting in bad tags being accepted ... I'm assuming that your input will be more than one tag, is that true?

Wim Over a year ago

The matching or order is not important, all input is valid except for html tags other then the strong and em tag. I have been experimenting with your answer to invert the result but I can't get it to work.

Wim Over a year ago

After a good night of rest and your help I have been able to put togheter this: <input type="text" pattern="((?!<(?!\/?(strong|em))[^>]*>).)*"> this seems to do what I want, all text is accepted unless an html tag aside 'em' or 'strong' has been used. Thank you very much Vasili!

Collectives™ on Stack Overflow

advanced regex pattern for html5 input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related