Regex extracting number with connecting dot and hyphen

Question

Lets say I have the following string:

<div style="color: red; display.: inline-block;"><i class="fa fa-arrow-down" aria-hidden="true"></i> -18.9%</div>

What want to extract is -18.9

I currently have [^0-9.-]+ in javascript But that will include every dot and hyphen in the string, so I need something that only extract comma and hyphen if followed by a number.

And to clearify, the dots and hyphens may or may not exist, sometimes not the html either

Use DOM methods (e.g el.innerHTML) to parse HTML not a RegEx — Alex K., Dec 01 '16 at 13:28
Its a javascript function, and all the html may not exist, sometimes its just the number — Tronik, Dec 01 '16 at 13:30
Are you trying to access it within an HTML doc with access to the DOM, or is this strictly a string within JS? — Brett DeWoody, Dec 01 '16 at 13:31
Better add some more examples then, is there always a trailing %? — Alex K., Dec 01 '16 at 13:31
Please do not be using regex to parse HTML. There are countless other questions that are asking this, please do a proper search on this site. — t0mm13b, Dec 01 '16 at 13:32
It is a javascript function within datatables, summarizing columns in the footer, and sometimes the cells contains this html. — Tronik, Dec 01 '16 at 13:34
var intVal = function ( i ) { return typeof i === 'string' ? i.replace(/[^0-9.-]+/g, '')*1 : typeof i === 'number' ? i : 0; }; — Tronik, Dec 01 '16 at 13:34
I am almost there, I just need that the dot and hyphen needs to be followed by a digit/number to match — Tronik, Dec 01 '16 at 13:35
So what if your HTML happens to have a number in an attribute? example: `
18.6%
`? => Don't parse HTML with regex. Sooner or later it will break — trincot, Dec 01 '16 at 13:43

score 2 · Answer 1 · edited May 23 '17 at 11:52

Don't parse HTML with regex. Instead use a DOM parser, which makes it a piece of cake:

var str = '<div style="color: red; display.: inline-block;"><i class="fa fa-arrow-down" aria-hidden="true"></i> -18.9%</div>';
var parser = new DOMParser();
var doc = parser.parseFromString(str, "text/html");
// get text content and remove '%' from it.
console.log(doc.documentElement.textContent.replace(/%/, ''));

Note that this also works if str is just plain text, like 25.3.

If it represents a valid number you can convert it with parseFloat or the unitary +. Note that thousands separator(s) will need to be removed first with a replace.

If your actual HTML string is more complex and has other text nodes in it, then use the usual DOM methods to find the node of your interest, for instance:

doc.querySelector('div').textContent

Why won't your solution work for him? It is the most precise I think. — Mohammad Yusuf, Dec 01 '16 at 13:57

Brett DeWoody · Answer 2 · 2016-12-01T13:56:08.740

0

It sounds like you're dealing with a string, that appears to be taken from HTML. If this is the case, and you can't get the innerHTML property there are 2 options.

1. Convert to HTML and use innerText

var tempEl = document.createElement('div');
tempEl.innerHTML = '<div style="color: red; display.: inline-block;"><i class="fa fa-arrow-down" aria-hidden="true"></i> -18.9%</div>';

var myNumber = parseFloat(tempEl.children[0].innerText.trim())

will result in the number

-18.9

2. Regex This regex will match a string starting with a - and followed by a whole or decimal number

/(-)?\d+(\.\d*)*/g

Using your example:

<div style="color: red; display.: inline-block;"><i class="fa fa-arrow-down" aria-hidden="true"></i> -18.9%</div>

will result in a match of

-18.9

Here's a demo.

edited Dec 01 '16 at 13:56

answered Dec 01 '16 at 13:39

Brett DeWoody

59,771
29
135
184

Your regex almost works, but the hyphens may or may not exists – Tronik Dec 01 '16 at 13:52
Another question, sometimes the number will look like this: 19,079.50 will the comma be replaced with space or merged? Its the only thing that doesnt work right now. – Tronik Dec 01 '16 at 14:04
Could the whole regex above be inverted? to match everything but that. that way I can use replace method. – Tronik Dec 01 '16 at 14:07
I fixed it: [^\-*(\d+(\.\d*)?)] – Tronik Dec 01 '16 at 14:08
No I did not... [^\-(\d+(\.\d)?)] matches dots and hyphen elsewhere in the string – Tronik Dec 01 '16 at 14:10
Maybe you could provide more detail into what you're doing, it seems over-complicated. You want to replace the number within the tags? I would use option #1 or something like what @trincot recommended and use `innerText` to replace the number within the tag. – Brett DeWoody Dec 01 '16 at 14:10
2

Tronik, sooner or later your regex solution will break. Don't use regex on HTML. Developers commonly agree on that (out of experience). Think of what would happen if there are digits somewhere in the HTML tags (in their attributes). Do yourself a favour and [follow the advise of experienced developers](http://stackoverflow.com/a/1732454/5459839) – trincot Dec 01 '16 at 14:12

score -1 · Answer 3 · answered Dec 01 '16 at 13:40

-1

here's the simple regular expression for it [-0-9]+.?[0-9]

answered Dec 01 '16 at 13:40

noodlesegg

149
6

1

Doesn't work if the number contains more than one decimal – Tronik Dec 01 '16 at 13:45
it works for this value `-134343.4545454549%`. Perhaps can you give me an example of your sample cases. – noodlesegg Dec 01 '16 at 13:55

Regex extracting number with connecting dot and hyphen

3 Answers3