Count regular expression matches in jQuery

Question

I need to count a group of regular expressions in a dynamically loaded <div> that I've loaded using the load() function. I also need to resize this <div> to the longest line of characters in it. Is there a way to achieve this? I've tried searching around and can't find anything, not even on SO. I should mention that the expression I am testing for is:

Sat Mar 12 12:45:38 PST 2011

Using this regex:

if ($('#result').text().match(/[A-Za-z]{3}\s[A-Za-z]{3}\s[0-9]{1,2}\s[0-9]{2}:[0-9]{2}:[0-9]{2}\s[A-Z]{3}\s[0-9]{4}/))

Answer 1

var str="The rain in SPAIN stays mainly in the plain"; 
var patt1=/ain/gi;  //noticed the g.  g will enable match of all occurance, and without it it'll only match the first occurance
console.log(str.match(patt1).length);  //4 matched

JavaScript match regex function returns an array so you can basically do a length on that array and get the size of the matched elements. Make sure you are using the g in RegEx to search all occurance

Based on your RegEx you can do the following:

$('#result').text().match(/[A-Za-z]{3}\s[A-Za-z]{3}\s[0-9]{1,2}\s[0-9]{2}:[0-9]{2}:[0-9]{2}\s[A-Z]{3}\s[0-9]{4}/g).length //this should give you the total count of occurance

Answer 2

kjy112 gave you your answer. Like that answer clarified, this isn't really jQuery, but Javascript RegEx's (so maybe that was throwing off your search).

If that regex turns out to be slow-- which it might if you return many dates-- you can just count some nique component, such as just the years:

$('#result').text().match(/\d{4}/).length

Answer 3

Malfy,

3 ways to get the width of a string come to mind. I'll go over those first, then how to get the length of the longest. It looks like others have addressed the regex.

1) (fastest)

If only the text itself needs to be a certain width, not the div, then you can use white-space:nowrap to ensure the text remains the full width.

$('div.someClass').css('whiteSpace','nowrap');




2) (slowest)

If you need the pixel width of a string to set another div's width, one way to do that is to create an element containing that string and use the css property above. Example:

var yourString = 'your string';
// create a div containing your string
var $tempDiv = jQuery('<div style="visibility:hidden;position:absolute;white-space:nowrap">'+jQuery.trim(yourString)+'</div>').appendTo('body');
$newDiv = <your new div, however you're creating it>;
// set the width of the new div to the width of the temp div
$newDiv.width($tempDiv.width());
// and clean up;
$tempDiv.remove();
//repeat as necessary




3) (quite fast too)

Alternately, if you're sure you'll be using a monospace font (courier, consolas, etc). There's a much faster way. Save the width of a single character and multiplying it by the length of each new text string. That way you aren't writing a new element each time. For example:

var $tempDiv = $('<div style="visibility:hidden;margin:0;padding:0;border:0;">z</div>').appendTo('body');
//(any character will work. z is just for example); 
var reusableCharacterWidth=$tempDiv.width();
$tempDiv.remove();

var firstString = your string';
// set the width of your first div
$newDiv.width(reusableCharacterWidth*firstString.length);
var nextString = 'your next string';
// set the width of your next div
$nextNewDiv.width(reusableCharacterWidth*nextString.length);

(note: you may want to use $.trim() on the strings just in case)

To get the longest string:

var longestLineLength,
    yourText= 'your text here';
function getLongestLineLength(lines){
    var oneLineLength,
        longest=0,
        linesArray = lines.split('\n');
    for(var i=0,len=linesArray.length;i<len;i++){
        oneLineLength=linesArray[i].length;
        longest=oneLineLength>longest?oneLineLength:longest;
    }
  return longest;
}
longestLineLength = getLongestLineLength(yourText);

Cheers!

Adam