jQuery RegEx Examples to use with .match()

This is a reference post for some common RegExp (regular expressions) selectors that can be used with the jQuery.match() function. This is very handy for finding pretty much anything inside your web page text and then doing something neat with it. Also handy for validation on forms. Learn how to use Regex with these examples:

jQuery RegExp for Numbers


//select integers only
var intRegex = /[0-9 -()+]+$/;   
//match any ip address
var ipRegex = 'bd{1,3}.d{1,3}.d{1,3}.d{1,3}b';  
//match number in range 0-255
var num0to255Regex = '^([01][0-9][0-9]|2[0-4][0-9]|25[0-5])$';
//match number in range 0-999 
var num0to999Regex = '^([0-9]|[1-9][0-9]|[1-9][0-9][0-9])$';
//match ints and floats/decimals
var floatRegex = '[-+]?([0-9]*.[0-9]+|[0-9]+)'; 
//Match Any number from 1 to 50 inclusive
var number1to50Regex = /(^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$)/gm;

jQuery RegExp for Validation


//match email address
var emailRegex = '^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$'; 
//match credit card numbers
var creditCardRegex = '^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35d{3})d{11})$'; 
//match username
var usernameRegex = '/^[a-z0-9_-]{3,16}$/'; 
//match password
var passwordRegex = '/^[a-z0-9_-]{6,18}$/'; 
//Match 8 to 15 character string with at least one upper case letter, one lower case letter, and one digit (useful for passwords).
var passwordStrengthRegex = /((?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,15})/gm; 
//match elements that could contain a phone number
var phoneNumber = /[0-9-()+]{3,20}/;

jQuery RegExp for Dates


//MatchDate (e.g. 21/3/2006)
var dateRegex = /(d{1,2}/d{1,2}/d{4})/gm; 
//match date in format MM/DD/YYYY
var dateMMDDYYYRegex = '^(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)dd$'; 
//match date in format DD/MM/YYYY
var dateDDMMYYYRegex = '^(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)dd$';

jQuery RegExp for URL’s


//match a url
var urlRegex = '/^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/'; 
//match a url slug (letters/numbers/hypens)
var urlslugRegex = '/^[a-z0-9-]+$/'; 
//match a url string (Fixes spaces and querystrings)
var urlRegex = /(https?://)?([da-z.-]+).([a-z.]{2,6})([/w.-=?]*)*/?/

jQuery RegExp for Vowels


//select vowels only
var vowelRegex = /^[aeiou]/;

jQuery RegExp for Whitespace


//select whitespace
var whiteSpaceRegex = '^[ t]+'; 
//select whitespace and tabs
var whiteSpaceRegex = '^[ t]+|[ t]+$';  
//select whitespace and linebreaks
var whiteSpaceRegex = '[ trn]';  
//replace newline characters with 
 tags
newLineToBr = function(str) { return str.replace(/(rn|[rn])/g, '
'); }

jQuery RegExp for Domain Names


//match domain name (with HTTP)
var domainRegex = /(.*?)[^w{3}.]([a-zA-Z0-9]([a-zA-Z0-9-]{0,65}[a-zA-Z0-9])?.)+[a-zA-Z]{2,6}/igm; 
//match domain name (www. only) 
var domainRegex = /[^w{3}.]([a-zA-Z0-9]([a-zA-Z0-9-]{0,65}[a-zA-Z0-9])?.)+[a-zA-Z]{2,6}/igm; 
//match domain name (alternative)
var domainRegex = /(.*?).(com|net|org|info|coop|int|com.au|co.uk|org.uk|ac.uk|)/igm; 
//match sub domains: www, dev, int, stage, int.travel, stage.travel
var subDomainRegex = /(http://|https://)?(www.|dev.)?(int.|stage.)?(travel.)?(.*)+?/igm;

jQuery RegExp for Images


//Match jpg, gif or png image	
var imageRegex = /([^s]+(?=.(jpg|gif|png)).2)/gm; 
//match all images
var imgTagsRegex = //ig;  
//match just .png images

Other Useful jQuery RegExp Examples


//match RGB (color) string
var rgbRegex = /^rgb((d+),s*(d+),s*(d+))$/;  
//match hex (color) string
var hexRegex = '/^#?([a-f0-9]{6}|[a-f0-9]{3})$/'; 
//Match Valid hexadecimal colour code
var hexRegex = /(#?([A-Fa-f0-9]){3}(([A-Fa-f0-9]){3})?)/gm; 
//match a HTML tag (v1)
var htmlTagRegex = '/^< ([a-z]+)([^<]+)*(?:>(.*)< /1>|s+/>)$/'; 
//match HTML Tags (v2)
var htmlTagRegex = /(< (/?[^>]+)>)/gm; 
//match /product/123456789
var productUrlRegex = '(/product/)?+[0-9]+';  
//Match Letters, numbers and hyphens
var lnhRegex = /([A-Za-z0-9-]+)/gm;  
//match all .js includes	
var jsTagsRegex = /

These patterns are intended for reference purposes and many have not been extensively tested. Please use with caution and test thoroughly before use.

Frequently Asked Questions (FAQs) about jQuery Basic Regex Selector Examples

What is a jQuery Basic Regex Selector?

A jQuery Basic Regex Selector is a powerful tool in jQuery that allows you to select elements based on a regular expression pattern. Regular expressions, or regex, are sequences of characters that form a search pattern. This can be used for string matching within jQuery. For example, you can use a regex selector to select all elements that have an ID that starts with a specific string.

How do I use a jQuery Basic Regex Selector?

To use a jQuery Basic Regex Selector, you need to use the syntax: $(“:regex(name, expression)”). Here, “name” is the attribute you want to match and “expression” is the regular expression you want to match it with. For example, to select all elements with an ID that starts with “test”, you would use: $(“:regex(id, ^test)”).

Can I use jQuery Basic Regex Selector for form validation?

Yes, jQuery Basic Regex Selector can be used for form validation. For example, you can use it to check if the input in a form field matches a certain pattern, such as an email address or phone number. This can help ensure that the data entered by the user is in the correct format before it is submitted.

What are some common uses of jQuery Basic Regex Selector?

jQuery Basic Regex Selector can be used for a variety of tasks, such as form validation, filtering elements, and manipulating HTML. It can also be used to create dynamic web pages that respond to user input in real-time.

How can I use jQuery Basic Regex Selector to select elements based on their content?

You can use the “:contains()” selector in jQuery to select elements based on their content. This selector selects elements that contain the specified text. For example, to select all paragraphs that contain the word “jQuery”, you would use: $(“p:contains(‘jQuery’)”).

Can I use multiple jQuery Basic Regex Selectors in a single statement?

Yes, you can chain multiple jQuery Basic Regex Selectors together in a single statement. This allows you to select elements that match multiple criteria. For example, to select all elements with an ID that starts with “test” and a class that ends with “example”, you would use: $(“:regex(id, ^test):regex(class, example$)”).

How can I use jQuery Basic Regex Selector to select elements based on their attributes?

You can use the “:attr()” selector in jQuery to select elements based on their attributes. This selector selects elements that have the specified attribute. For example, to select all elements with a “data-example” attribute, you would use: $(“:attr(‘data-example’)”).

Can I use jQuery Basic Regex Selector with other jQuery methods?

Yes, you can use jQuery Basic Regex Selector with other jQuery methods. For example, you can use it with the “.css()” method to change the style of selected elements, or with the “.hide()” method to hide selected elements.

How can I use jQuery Basic Regex Selector to select elements based on their position in the DOM?

You can use the “:eq()” selector in jQuery to select elements based on their position in the DOM. This selector selects the element at the specified index. For example, to select the third element in a list, you would use: $(“li:eq(2)”).

Can I use jQuery Basic Regex Selector to select elements based on their visibility?

Yes, you can use the “:visible” and “:hidden” selectors in jQuery to select elements based on their visibility. These selectors select elements that are currently visible or hidden, respectively. For example, to select all visible paragraphs, you would use: $(“p:visible”).