How do I get a loose number in my HTML?

Asked

Viewed 478 times

8

Consider the following code:

<span class="test"><span style="color:green">Teste</span>:</span> Text<br><br>
<span class="test"><span style="color:green">Mais</span>:</span> Text<br><br>
<span class="test"><span style="color:green">Número</span>:</span> 250<br><br>

How do I separate that number (250) that comes right after the word "Number" to be treated later in Javascript? I think it’s possible with regular expressions, but I couldn’t do the effect...

The span can repeat themselves infinitely, and I need to look for the number that comes right after.

javascript jquery html string regex

  • Can you change the html? The "correct" would be to put the numbers inside the spans themselves. Then you take it easy, without regex.

  • Unfortunately in this case I do not have this possibility... I would have to take the value as this in the example...

  • The problem is not very clear, but if the only thing you want is the number, it’s quite easy, just "[0-9]+".

  • Now that I saw that you say "I need to look for the word and the number that comes right after...". What word exactly do you want besides the number?

  • Unfortunately other values may not be strings there either.. For example, I may or may not have a field written date and then soon after another numerical value understand? It would have to be just the number that comes right after the word "Number". I don’t know how I would do that..

  • 1

    You can match the entire string "Number</span>:</span> ([0-9]+)" with the number part in parentheses to create a group, and then ask only the group with " 1"

  • Could you post an answer with a friendly example? I’m not experienced with Regex.. By the way, I have a lot of difficulty with it! I’d be grateful if you could do that!!

  • Wagner, I know how to do it in R. I would have to see how regex is implemented in Javascript. It shouldn’t be complicated (here are some tips http://www.regular-expressions.info/javascript.html), but only then can I take a look. Anyone who wants to answer before can be at ease, abs!

  • "I think it’s possible with regular expressions."I think it’s worth repeating... Regular expressions are not the best tool to handle HTML (or XML). If you can avoid them, avoid them. Only in some cases much limited they are applicable, and yet there is a chance that - if HTML changes in the future - the solution that previously worked will start to present problems. A solution like that of the bfavaretto is the ideal, not only for being "faster to process", but mainly for being more correct.

Show 4 more comments

2 answers

8


You can cross the DOM instead of using regex, it’s much faster to process. Do the following:

  1. Find the <span> containing "Número" and, for each one:
  2. Access his father’s knot (parentNode) and take the knot to the side (nextSibling)
  3. Convert the value to number and store somewhere.

The code below does this:

var rotulos = document.querySelectorAll('.test span'), rotulo;
var valores = [], valor, node;
for(var i=0; i<rotulos.length; i++) {
    rotulo = rotulos[i].textContent || rotulos[i].innerText;
    if(rotulo === 'Número') {
        node = rotulos[i].parentNode.nextSibling;
        valor = node.textContent || node.innerText;
        valores.push(Number(valor));
    }
}
// valores agora contém os números

Demo

4

Hello, Whereas the spans code is directly inside the body, it would look like this: 

var html = document.body.innerHTML;
var regex = /<\/span> ([0-9]+)/g;
var resultados;
//Itera por todas as correspondências do número
while(resultados = regex.exec(html)){
    console.log(resultados[1]);
}

The exec method returns an array with match(match) in addition to the groups captured by the syntax in parentheses (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec). In the sixth line we take the first group, which corresponds to the number, in index 1.

Browser other questions tagged javascript jquery html string regex

You are not signed in. Login or sign up in order to post.