Using jQuery to find a substring

Question

Say you have a string: "The ABC cow jumped over XYZ the moon" and you want to use jQuery to get the substring between the "ABC" and "XYZ", how would you do this? The substring should be "cow jumped over". Many thanks!

Answer 1

This has nothing to do with jQuery, which is primarily for DOM traversal and manipulation. You want a simple regular expression:

var str = "The ABC cow jumped over XYZ the moon";
var sub = str.replace(/^.*ABC(.*)XYZ.*$/m, '$1');

The idea is you're using a String.replace with a regular expression which matches your opening and closing delimiters, and replacing the whole string with the part matched between the delimiters.

The first argument is a regular expression. The trailing m causes it to match over multiple lines, meaning your text between ABC and XYZ may contain newlines. The rest breaks down as follows:

• ^ start at the beginning of the string
• .* a series of 0 or more characters
• ABC your opening delimiter
• (.*) match a series of 0 or more characters
• XYZ your closing delimiter
• .* a series of 0 or more characters
• $ match to the end of the string

The second parameter, the replacement string, is '$1'. replace will substitute in parenthesized submatchs from your regular exprsesion - the (.*) portion from above. Thus the return value is the entire string replace with the parts between the delimiters.

Answer 2

You may not need to use jQuery on this one. I'd do something like this:

function between(str, left, right) {
    if( !str || !left || !right ) return null;
    var left_loc = str.indexOf(left);
    var right_loc = str.indexOf(right);
    if( left_loc == -1 || right_loc == -1 ) return null;
    return str.substring(left_loc + left.length, right_loc);
}

No guarantees the above code is bug-free, but the idea is to use the standard substring() function. In my experience these types of functions work the same across all browsers.

Answer 3

Just to show you how you would use jQuery and meagar's regex. Let's say that you've got an HTML page with the following P tag:

<p id="grabthis">The ABC cow jumped over XYZ the moon</p>

To grab the string, you would use the following jQuery/JavaScript mix (sounds kind of stupid, since jQuery is JavaScript, but see jQuery as a JavaScript DOM library):

$(document).ready(function() { // Wait until the document has been fully loaded
  var pStr=$("#grabthis").text(); // Grab the text from the P tag and put it into a JS variable
  var subStr=pStr.replace(/^.*ABC(.*)XYZ.*$/m, '$1'); // Run the regex to grab the middle string

  alert(subStr); // Output the grabbed middle string
});

Or the shorter version:

$(document).ready(function() {
  alert($("#grabthis").text().replace(/^.*ABC(.*)XYZ.*$/m, '$1'));
});

The replace function is a JavaScript function. I hope this clears the confusion.

Answer 4

Meagar, your explanation is great, and clearly explains who it works.

Just a few minor questions:

• Are the () parenthesis required ONLY as a way to indicate a submatch in the second parameter of the relpace function or would this also identify the submatches: /^.*ABC.XYZ.$/ but not work for what we are trying to do in this case?

• Does this regular expression have 7 submatches:

^
.*
ABC
.*
XYZ
.*
$

• Does the $1 mean to use the first parenthesized submatch? At first I thought it might mean to use the second submatch in the series (the first being $0).

Thanks,

Steve