Get text before the last br in div jquery

Question

Hi Guys i have this in html

<div class="flexmls_connect__sr_address">
  <div class="flexmls_connect__ld_price">$9,000,000</div>
  Km. 16.5 Carr. Barra de Navidad, Villa Armonia Estate
  <br>
  Puerto Vallarta, JA
  <br>MLS# 11187
  <br>//NEED THIS NUMBER---- >5 beds &nbsp;|&nbsp; //AND THIS NUMBER---- >8 baths &nbsp;|&nbsp; 11836 sqft
  <br>
</div>

and this in jquery

    var baths = $(res).find('.flexmls_connect__sr_address').before('br').last().contents().filter(function() {
        return this.nodeType == 3;
    }).text();

I need obtain the beds and baths, and for clearify not is my html code i obtain from a very old API and i cant change the HTML, i neee that values with only jquery or javascript. not neccesary with my answer all methos are welcome i only try many of theme and the last is get text before last tag br but any help is great, thanks :D

Answer 1

before() is a dom insertion method. Can do something like the following

var specs = $('.flexmls_connect__sr_address').contents().filter(function() {
    return this.nodeType == 3 && $(this).text().indexOf('beds')>-1;
}).text().split('|').reduce(function(a,c){
    if(c.indexOf('beds')>-1){
        a.beds = /\d+/.exec(c)[0]
    }else if(c.indexOf('baths')>-1){
        a.baths = /\d+/.exec(c)[0]
    }
    return a
},{});

console.log(specs);
console.log('Property has ', specs.baths, ' baths and ', specs.beds, ' beds');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexmls_connect__sr_address">
  <div class="flexmls_connect__ld_price">$9,000,000</div>
  Km. 16.5 Carr. Barra de Navidad, Villa Armonia Estate
  <br>
  Puerto Vallarta, JA
  <br>MLS# 11187
  <br>5 beds &nbsp;|&nbsp; 8 baths &nbsp;|&nbsp; 11836 sqft
  <br>
</div>

Answer 2

You have to find text node content:

In this sample is //NEED THIS NUMBER---- >5 beds  |  //AND THIS NUMBER---- >8 baths  |  11836 sqft then remove all characters except numbers and | char with regex such as this:

var textNodeContent = '//NEED THIS NUMBER---- >5 beds  |  //AND THIS NUMBER---- >8 baths  |  11836 sqft',
stripped = textNodeContent.replace(/[^0-9\|]/g, '');
// the result will be 5|8|11836

Answer 3

If you HTML follows the same format as in the example then you can achieve your goal by selecting the inner HTML of each div.flexmls_connect__sr_address block, and using split() at each <br>. The text you need is always going to be the second last item in that list, and this in turn can be split() at each  |  like so...

$('.flexmls_connect__sr_address').each(function() {
    // get innerHTML and split into array
    var block = $(this).html().split('<br>');

    // split second-last line into array
    var line = block[block.length - 2].split('&nbsp;|&nbsp;');

    // report to console
    console.log(' beds:',line[0].trim());
    console.log('baths:',line[1].trim());
    console.log(' sqft:',line[2].trim());
    console.log('----');
});

As mentioned elsewhere, you can then use regular expressions to grab just the number from each item in line as needed. I.E..

var beds = line[0].replace(/\D+/g, "");

Hope that helps. :)

Answer 4

Try this (assuming the information is available after the 3rd "break" tag in div."flexmls_connect__sr_address" :

document.getElementsByClassName('flexmls_connect__sr_address')[0].getElementsByTagName("br")[2].nextSibling.data.split("|");

Here's the response that you would get ["5 beds  ", " 8 baths  ", "  11836 sqft↵ "]