0

Hi I have a string that can be one of the following, or none, and I'm trying to test to see if one of two class names exists in the string.

<span class="italic bold">beatae</span>
<span class="bold italic">beatae</span>
<span class="bold">beatae</span>
<span class="italic">beatae</span>

A successful match should mean the string is a complete span tag with one of those two class names on it. Ideally I'd like string.match to return the class names (italic, bold, or both) if possible.

The most related post I found on here is this: Need Regexp for classname replace I tried adapting the regex to fit my needs but I'm missing something.

This is what I have so far:

/^<span class="(bold|italic)">[^<]*<\/span>$/i

But I always get null for matches. Thanks in advance!

Edit: It's an actual string in Javascript, not a DOM node, so its equivalent to; 

var mystring = '<span class="bold italic">beatea</span>';
var matches = mystring.match( /regex/ );
Community
  • 1
  • 1
Jonathan
  • 543
  • 9
  • 23
  • 1
    What do you match against? – Bergi Feb 19 '13 at 14:25
  • 1
    You could use jQuery for this. `if($('span').hasClass('italic') || $('span').hasClass('bold'))` – Adrian Marinica Feb 19 '13 at 14:26
  • 1
    You need to add some context. Are you using outerHTML to get the string, className, or what ? – adeneo Feb 19 '13 at 14:26
  • 1
    I think an important question is "what are you trying to do in general?" – Explosion Pills Feb 19 '13 at 14:28
  • Basically I'm working on a text editor (contenteditable) and I'm comparing the users selection to toggle editor buttons. If the selection includes classes, I depress the buttons so the UI matches the selection. The selection is returned as a string of HTML that I'm comparing against. – Jonathan Feb 19 '13 at 14:36

2 Answers2

1

Try this on:

/^<span\sclass="[\w\s]*(bold|italic)+[\w\s]*">[^<]*<\/span>$/i

You forgot to match any additional classes that might occur, which is what the additional [\w\s]* are about.

UPDATE

Since you can not do repeating groups in javascript regular expressions, you have to match the string multiple times for each class you want to get if you want to get both classes in group results (preferrably via indexOf because RegExp is useless in this case):

 var classesToMatch = ['italic', 'bold'],
     matchedClasses = [],
     htmlString = "<span class='bold italic'>beatae</span>";
 for (var i = 0; i < classesToMatch.length; i++) {
   if (htmlString.indexOf(classesToMatch[i]) > -1) {
     matchedClasses.push(classesToMatch[i]);
   }
 }

matchedClasses will contain all matched classes.

Community
  • 1
  • 1
Beat Richartz
  • 9,474
  • 1
  • 33
  • 50
  • Very close, with a test string with both class names .match returns an array with the original string as match[0], and match[1] is italic. It's missing the bold class. – Jonathan Feb 19 '13 at 14:34
  • Update works perfect now thanks! I didn't realize JS can't do that, good to know. – Jonathan Feb 19 '13 at 14:55
0

I'm not sure you need regexp. It's better to work with element you need:

var array = document.getElementsByTagName('span'); // get all span elements
//check each span element for class 'italic' or 'bold'
for(i=0;i<array.length;i++) {
    if((array[i].className.indexOf('bold') != -1) || (array[i].className.indexOf('italic') != -1))  {
    //if there are our classes - do something with this span
    console.log(array[i]); // array[i] - is a span which contains certain classes
    }
}
starowere
  • 113
  • 4