Selecting text between

Question

Is it possible to select text between
tags? I am working with the preformatted code below trying to select this data: New York, NY 10012

I've played around with $('#address').find('br').eq(2).text(), but know that there must be a better way.

    <div id="address">
        Joe Dirt<br>
        PO Box 842<br>
        New York NY 10012<br>
        800-555-5555<br>
        <br>
    </div>

Thanks!

It'll be easier if you put your text in `p` elements instead of using `br` elements. — , Sep 07 '13 at 16:54
@Jeffman extra divs or spans would make more sense though; since it's not a paragraph — Hawken, Sep 07 '13 at 16:57
May I ask why you're using jQuery here? `document.getElementByID('address')` would be less overhead. — Hawken, Sep 07 '13 at 16:59
I agree with using other elements than `br`. I did not write the html, though. — user2062244, Sep 07 '13 at 16:59

Kevin Bowersox · Accepted Answer · 2013-09-07T17:01:48.293

6

Retrieve the HTML for the div and split on the br tag:

$.trim($("#address").html().split("<br>")[2]);

JS Fiddle: http://jsfiddle.net/KQgu5/

edited Sep 07 '13 at 17:01

answered Sep 07 '13 at 16:54

Kevin Bowersox

93,289
19
159
189

You went above the speed limit, take my +1 ;) – RienNeVaPlu͢s Sep 07 '13 at 16:55
I always forget about `.split()`. Works for me. Thanks! – user2062244 Sep 07 '13 at 17:00
1

I'd also wrap the whole thing in a trim and get rid of the whitespace: `$.trim($("#address").html().split("
")[2]);` – Mark Sep 07 '13 at 17:00
@Mark Nice addition. Thanks for the suggestion. – Kevin Bowersox Sep 07 '13 at 17:02
Portnoy's answer expands on this a bit, to solve for `
` & `
` – Hawken Sep 07 '13 at 17:09

RobertO · Answer 2 · 2013-09-07T17:33:52.000

Instead of selecting the text based on the html you can use the DOM and pick out the appropriate TextNode using the childNodes array.

Since the Nodes are counted starting at 0:

address.childNodes[0] # "Joe Dirt"
address.childNodes[1] #   br element
address.childNodes[2] # "PO Box 842"
address.childNodes[3] #   br element
address.childNodes[4] # "New York NY 10012"
address.childNodes[5] #   br element
address.childNodes[6] # "800-555-5555"
address.childNodes[7] #   br element

Example code:

var address = document.getElementById ("address");
alert(address.childNodes[4].nodeValue);

http://jsfiddle.net/78evc/

user2736012 · Answer 3 · 2013-09-07T17:06:15.203

var vals = $("#address > br").map(function(i, br) {
    return $.trim(br.previousSibling.data);
}).toArray();

Since the text always appears before a <br> element, you can select the brs and map the .previousSibling.data of each to an Array.

This also doesn't suffer from the possibility of HTML rendering being a little different in different browsers, which you can get with HTML parsing approaches.

If you just need the one value, then do this:

var txt = $.trim($("#address > br")[2].previousSibling.data);

score 1 · Answer 4 · answered Sep 07 '13 at 17:06

How about this:

var line = $("#address").html().split(/<br *\/?>/i)[2];

I know it's not "selecting" the line, but as there's no other way with or without jQuery (your solution didn't work for me out-of-the-box), I think it can be a good approach.

Please note it's allowing different ways of writing the <br> tag.

score 0 · Answer 5 · answered Sep 07 '13 at 16:55

0

try this:

var html = $('#address').html();
var arr = html.split('<br>');
var data = arr[2]; //the information that you want

answered Sep 07 '13 at 16:55

Alessandro Minoccheri

35,521
22
122
171

score 0 · Answer 6 · edited May 23 '17 at 10:31

I would probably go for this solution to find the text field you want:

  $("div")
  .contents()
  .filter(function() {
    return this.nodeType === 3;
  })[2];

It's presented here : https://stackoverflow.com/a/298758/681538

Why? Because it's delimiter agnostic, and you are really just having a list of text nodes separated with a separator. Since we can get the text nodes with jquery without having to care about what separator you have to adjust to, so why would we?

Selecting text between

6 Answers6

Linked