Little regular expression on js

Question

I am new in regular expressions. I have the variable that contains:

<b><font color="#32748">My string:</font></b>
<big>  My value </big>
<br>

Its string in varible repeating multiple times with changing of My string and My value(random value). I need to find My value of concrete My string and store (value) in new varible. Sometimes that string has spaces, sometimes without space.

Answer 1

var myRegEx = /<b><font color="#[0-9]{3,6}">(.+)<\/font><\/b>[\r\n]{0,2}<big>(.+)<\/big>[\r\n]{0,2}<br>/i;
var myString = '<b><font color="#32748">My string:</font></b>\n<big>  My value     </big>\n<br>';
var myResult = myString.match(myRegEx);
console.log(myResult[1] + " | " + myResult[2]);

RegEx:
[0-9] Matches any single character in the range 0-9.
{3,6} Matches 3 to 6 of the preceeding token.
(.+) Capture group.
. Matches any character, except for line breaks if dotall is false.
+ Matches 1 or more of the preceeding token.
\n Line break character.
\r Carriage return character.
[\r\n] Match any single character in the set.
{0,2} Matches 0 to 2 of the preceeding token.

Now just apply it in your code. You can test it at http://gskinner.com/RegExr/.

Answer 2

You should really try to avoid using regular expressions for parsing HTML. Especially with very powerful tools to do so built right into every browser.

Here is a solution with no regular expressions, I find it pretty simple.

Here is how it works:

• We create an HTML element
• The browser already contains a very good HTML parser :) It handles edge cases like spaces in the name, escaped entities, and partial HTML for us just like it does for web pages. We dump the HTML in the element.
• We can query the element using the querySelector syntax, or even simpler getElementsByTagName if you're an old fashined guy.
• We use the textContent property to obtain the text.

Actual code:

var test = '<b><font color="#32748">My string:</font></b><big>  My value </big><br>';

// we create an empty element and put the html in it
var div = document.createElement("div");
div.innerHTML = test;

// get the text from the font tag, as you asked for.
var test = div.querySelector("font").textContent; 

Fiddle

Note, <font> tags are deprecated and should not be used in new code. I'd consider checking out the current HTML5 spec and seeing how things work in modern HTML.

Note2, in oldIE you can't use textContent so you can do innerHTML or innerText.

Answer 3

Use jquery for something like this:

var t = '<b><font color="#32748">My string:</font></b><big>  My value </big><br><b><font color="#32748">My string1:</font></b><big>  My value1 </big><br>';

var data = $('big', $('<div/>').append(t)).map(function() {
  return $.trim($(this).text());
});

console.log(data[0]);  // My value 
console.log(data[1]);  // My value1