Regex: match number in table cell - regex

Question

I have following table cell:
<td class="text-right"
onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">
2.004
</td>
It contains spaces and line breaks too. The class="text-right" isn't unique on the page, but the first - if it could help to relate on it.
I want to match only number (this one - 2.004, or any other, it is always only one number) - with or without the point and/ or comma in it.
PS: yes, i fully agreed that the idea to parse html with regex is not the best - any other method would be such kind of overhead, that it would be not worth to do:(
PPS: guys and guls - please write your recommendations as answers, not as comments, so i could accept and honorate them.
Solution: (?:<td\b.*?text-right\b.*?\D*?;">)([\s\S\d]*?)(?=\D*?<\/)
Edit: full length HTML:
<div class="box " >
<div class="box-head " >
<div class="box-icon">
<span class="icon "></span> </div>
<span class="divider"></span>
<div class="box-title box-title-space-1">
<span>Keyword-Profile</span></div>
<div class="box-options dropdown box-options-no-divider">
<div class="divider "></div>
<div class="box-icon "><a
class="button">
<span class="icon "></span> </a></div>
<ul class="dropdown-menu">
<li
> <a onclick="" class="modal"><div><div class="icon"><div></div></div><div class="text"> Add to Dashboard</div></div></a>
</li>
<li
><span class="box-menu-seperator"></span> <a onclick="
" href="" class="modal"><div><div class="icon"><div></div></div><div class="text"> Add to Report</div></div></a>
</li>
</ul>
</div>
</div>
<div class="module-loading-blocker">
<div class="module-loading-blocker-icon">
<div style="width: 40px; height: 40px; display: inline-block;">
<svg width="100%" height="100%" class="loading-circular" viewBox="0 0 50 50">
<circle class="loading-path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>
</div> </div>
</div>
<div class="box-content box-body box-table" > <table class="table table-spaced">
<tr>
<td>
Top-10
</td>
<td class="text-right"
onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">
2.004
</td>
</tr>
<tr>
<td>
Top-100
</td>
<td class="text-right"
onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">
237.557
</td>
</tr>
<tr>
<td>
∅ Position
</td>
<td class="text-right"
onmouseenter="$(this).find('.overlay-viewable-box:first').show();"
onmouseleave="$(this).find('.overlay-viewable-box:first').hide();">
60
</td>
</tr>
</table>
</div></div><div class="module" style="display: none;">x</div>

Answer 1

Update (JavaScript RegExp)
To get the number within <td>
Ignoring the fact code will not function and to provide a Regex that'll get the number in the first td.text-right only try this:
/(?:<td\b.*?text-right\b.*?\D*?)([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/)/
|1|]=-------------------------------------=[|2|]=-----------------------=[|3|]=------------=|]
begin non-capture (?: literal <td word border d\s & zero to any number of char until \b.*? literal text-right word border t\s & zero to any number of char until \b.*? zero to any number of char that is not a number until \D*? end non-capture )
begin capture ( one to any number of numbers until [0-9]+? zero to any number of a literal . or , until [.,]*? zero to any number of numbers until [0-9]*? end capture )
begin positive look ahead (?= of zero to any number of any non-number char until \D*? literal with escaped forward slash <\/ end-positive look ahead )
Better Regex
This one concentrates on the fact that each target is on the last column by adding: <\/td>\s*?</tr> in a positive look ahead.
/\b([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/td>\s*?<\/tr>)/g;
It has a cleaner result both matching and capture groups are the same. No side effect non-capturing group.
Demo
var rgx = /\b([0-9]+?[.,]*?[0-9]*?)(?=\D*?<\/td>\s*?<\/tr>)/g;
var str = document.documentElement.innerHTML;
let hits;
while ((hits = rgx.exec(str)) !== null) {
if (hits.index === rgx.lastIndex) {
rgx.lastIndex++;
}
hits.forEach(function(hit, idx) {
console.log(`Found match, group ${idx}: ${hit}`);
});
}
<div class="box ">
<div class="box-head ">
<div class="box-icon">
<span class="icon ">&f0ae;</span> </div>
<span class="divider"></span>
<div class="box-title box-title-space-1">
<span>Keyword-Profile</span></div>
<div class="box-options dropdown box-options-no-divider">
<div class="divider "></div>
<div class="box-icon ">
<a class="button">
<span class="icon ">&f013;</span> </a>
</div>
<ul class="dropdown-menu">
<li>
<a onclick="" class="modal">
<div>
<div class="icon">
<div>&f055;</div>
</div>
<div class="text"> Add to Dashboard</div>
</div>
</a>
</li>
<li><span class="box-menu-seperator"></span>
<a onclick="
" href="" class="modal">
<div>
<div class="icon">
<div>&f055;</div>
</div>
<div class="text"> Add to Report</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="module-loading-blocker">
<div class="module-loading-blocker-icon">
<div style="width: 40px; height: 40px; display: inline-block;">
<svg width="100%" height="100%" class="loading-circular" viewBox="0 0 50 50">
<circle class="loading-path" cx="25" cy="25" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"/>
</svg>
</div>
</div>
</div>
<div class="box-content box-body box-table">
<table class="table table-spaced">
<tr>
<td>
Top-10
</td>
<td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">
2.004
</td>
</tr>
<tr>
<td>
Top-100
</td>
<td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">
237.557
</td>
</tr>
<tr>
<td>
∅ Position
</td>
<td class="text-right" onmouseenter="\$(this).find('.overlay-viewable-box:first').show();" onmouseleave="\$(this).find('.overlay-viewable-box:first').hide();">
60
</td>
</tr>
</table>
</div>
</div>
<div class="module" style="display: none;">x</div>

Answer 2

A simple solution, provided that your parsing engine can search across lines, and supports lookarounds:
(?<=>\s*)([0-9]+(?:\.[0-9]+)?)(?=\s*<)
Explained:
The first part is (?<=>). (?<=regex) is called a positive lookbehind, which tells the parser to check if a pattern matching regex exists before the actual matching part. In this case it will look for any number of whitespaces after a >.
The core part, [0-9]+(\.[0-9]+)? matches one or more digits, optionally followed by a dot and another group of one or more digits. The last ? indicates that the decimal part is optional.
The last part is (?=<). (?=regex) is called a positive lookahead, which tells the parser to check if a pattern matching regex exists after the actual matching part. In this case it will look for any number of whitespaces, followed by a <.

Answer 3

Assuming your regex engine understands pcre, try
/>[\s]*([[:digit:]]+(\.[[:digit:]]+)?)[\s]*<\//g
to match a number optionally surrounded by whitespace ( including newline/linefeed characters ) which is the sole textual content of a html element. Capture group 1 holds the number.
You may need to adjust the pattern inside the capture group to cater for the kind of lexiclaisations you'd consider a 'number'.
Drop the start and the end of the expression ( ie. >, <\/ ) if the assumed structural html context is too restrictive for your purposes. Given your question you are aware that doing so increases the risk of false positives.
See it live at Regex101
Btw there are html parser libraries for most programming languages that allow for parsing lenient to syntax errors and sport simple interfaces to iterate over all textual content. Just for the sake of the argument, if jQuery or some similar functionality is available, you may proceed along the lines of this SO answer ( just replace the inner return expression with a regex test, like (untested code):
var re = RegExp('[[:digit:]]+(\.[[:digit:]]+)?', 'g');
$.fn.findByREText = function (re) {
$('*').contents().filter(function () {
return re.test($(this).text.trim());
});
};