1

I have an html table where one of the columns contains <span>s with comma-delimited data. I want to come up with a jQuery selector that returns all of the rows (<tr>s are preferable, but the <span>s will work for now) where one of the comma-delimited tokens <span> in a span tag matches a supplied string.

I started with something like the following:

$('td.col_8 span:contains("duck")')

which will get me all spans in a particular column containing the word 'duck'. However, it could also match <span>fox, mallard-duck</span>. Since 'duck' is not a unique token in that span, I wouldn't want that included in the match.

Is there a way to narrow my result set so I'm only including results where there's an exact match to a particular token in a column-delimited list?

(I'm using jQuery 1.2.3)

3 Answers 3

3

This is where the beauty of jQuery expressions come in.

You can add your own custom selector. I'm going to call it tag in this case

jQuery.expr[":"].tag = function(elem, index, match, nodeList) {
    var tags = $(elem).text().replace(/(?:\ +)?,(?:\ +)?/g, ",").split(",");
    return tags.indexOf(match[3]) > -1;
}

This will check each previously matched element against this selector. Fist it flattens the , seperations (so something like "firstTag , onotherer, badly , spaced, tag" will work). jQuery already takes care of parsing the selector and passes it in as match. match[3] is what you're interested in. With the following usage match[3] will be 'duck'

$('td.col_8 span:tag("duck")')

the return line will return true of false based on the tag being in the list.

3
  • That's really cool. There's some serious RegEx-fu going on in there :-). Jun 1, 2011 at 22:11
  • 1
    Its actually pretty simple. (?: ) is a non-matching group. \ + is any number of spaces. So (?:\ +)? is zero or more spaces, non matched. So this removes spaces around a comma but will leave spaces in a tag alone. Jun 2, 2011 at 0:30
  • thanks for the explanation! When you break it down like that, it's not so bad. I get easily intimidated by regex because I still don't know what all of the characters mean just by looking at it. Jun 2, 2011 at 1:21
2

I think this should do it

$('td.col_8 span').filter(function() { 
    return $(this).text().match(/^duck$/); 
});

Now you just need to define the regex that you need, or implement a string split and array search to return a boolean value to indicate if the <span> should be included.

4
  • Ah, .filter. I think that's exactly what I needed. If I don't use a regEx, I think I can still split the string and test for equality in the array elements. Thanks! Jun 1, 2011 at 21:50
  • 1
    It looks like that would only work if duck was the only keyword in the span.
    – James
    Jun 1, 2011 at 21:53
  • Note that using /^duck$/.test($(this).text()) is a little more efficient.
    – Pointy
    Jun 1, 2011 at 21:54
  • @James - exactly. This was just a demo to show how it could be done. I'll leave it to Ben to come up with the regex he needs or string splitting / array search implementation.
    – Russ Cam
    Jun 1, 2011 at 21:56
0

Going off of Russ Cam's answer, here's what I came up with:

$('td.col_8 span').filter(function() { 
  return $.inArray('quiet',$(this).html().split(', ')) !== -1;
});

Of course, this assumes that the list will always be delimited with ,[space], but it should work for my immediate use case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.