How to select the second text node via JQUERY

Question

Hi I want to SELECT the text nodes that is not under an element. But I want to SELECT them 1 by 1.

Like for example I only want to SELECT the second text node which is "Baths:".

Will that be possible?

I am doing this so I can add some icons before those text Nodes.

Here are the codes:

<div class="property-info">
Beds: <strong>3</strong> 
<br> 
Baths: <strong>2</strong> 
<br> 
Sq. Ft.: <strong> 1,055 </strong> 
<br> 
Type: <strong>Condo</strong> 
<br>
</div>

Thanks in advance!

https://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — Suresh Atta, Jun 13 '17 at 12:02
@charlietfl: No, I dont have the control on the html structure, it was dynamically created by a plugin. mathias: I need to select the text nodes. Each one of them. — Mark Lozano, Jun 13 '17 at 12:16
@SureshAtta I need to select them so I can add some icons before those text nodes. — Mark Lozano, Jun 13 '17 at 12:18

Arg0n · Answer 1 · 2017-06-13T12:46:21.603

You can replace the HTML with regular expressions:

var html = $('.property-info').html();
$('.property-info').html(html.replace(/(\s*)([^:\W]*)(.*)<strong>(.*)<\/strong>/g, '<i class="icon $2-icon">i</i> $2$3<strong>$4</strong>'));

.icon {
  color: white;
  border-radius: 15px;
  min-width: 15px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
}

.Beds-icon {
  background-color: green;
}

.Baths-icon {
  background-color: red;
}

.Sq-icon {
  background-color: blue;
}

.Type-icon {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="property-info">
  Beds: <strong>3</strong>
  <br>
  Baths: <strong>2</strong>
  <br>
  Sq. Ft.: <strong> 1,055 </strong>
  <br>
  Type: <strong>Condo</strong>
  <br>
</div>

The regular expression used: /(\s*)([^:\W]*)(.*)(.*)<\/strong>/g

Replaced with the string: i $2$3$4

Then some CSS applied to make it look like icons.

Hi, Thanks for the answer, But I dont want to extract them. I just want to select them so I will be able to add some icons before those text nodes. — Mark Lozano, Jun 13 '17 at 12:29
@MarkLozano Try running my example now. I think it's close to what you are looking for. — Arg0n, Jun 13 '17 at 12:51

charlietfl · Answer 2 · 2017-06-13T12:47:49.670

One approach that iterates contents() and checks if a text node's next sibling is  and uses object to store icon html based on text

var icons = {
  "Beds:": '[bed-icon]',
  "Baths:": '[bath-icon]'
}


$('.property-info').contents().each(function() {
  var $node = $(this);
  if (this.nodeType === 3 && $node.next().is('strong')) {
    var icon = icons[$node.text().trim()] || '';
    $node.before(icon);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="property-info">
  Beds: <strong>3</strong>
  <br> Baths: <strong>2</strong>
  <br> Sq. Ft.: <strong> 1,055 </strong>
  <br> Type: <strong>Condo</strong>
  <br>
</div>

Want to be deleted · Answer 3 · 2017-06-13T12:10:46.273

0

Here is a fiddle: https://jsfiddle.net/seo8mpoy/

*HTML Added spans so you can grab the text. NOTE!! i added spans you need to add them aswel.

 <div class="property-info">
 <span>Beds:</span><strong>3</strong> 
 <br> 
 <span>Baths:</span> <strong>2</strong> 
 <br> 
 <span>Sq. Ft.:</span> <strong> 1,055 </strong> 
 <br> 
 <span>Type:</span> <strong>Condo</strong> 
 <br>
 </div>

jquery

$('.property-info').on('click',function(){
  var t = $(this).find('span');
  t.each(function( index ) {
    console.log( index + ": " + $( this ).text() );
  });
});

edited Jun 13 '17 at 12:10

answered Jun 13 '17 at 12:05

Want to be deleted

136
7

Its not magic. it is added by me so you can pick out the text, Cant fix code without adding stuff or removing stuff :P lol – Want to be deleted Jun 13 '17 at 12:07
No mention of that in the answer and is not same markup as in question – charlietfl Jun 13 '17 at 12:09
Last time i try to help on stack overflow!! – Want to be deleted Jun 13 '17 at 12:10
Hi, thanks for the answer but the code I pasted was dynamically created by a plugin. That is why I need to select the text nodes. – Mark Lozano Jun 13 '17 at 12:14
1

Take it easy @NicholasO'Malley, the life is so short...@charlietfl just wanted to help you improve your answer. – Mathiasfc Jun 13 '17 at 12:16
Stil not helping on stack anymore. To much work if people need me to explain i added a god dam span, and the way people "help" is like playing a bad game of LOL – Want to be deleted Jun 13 '17 at 12:25
Actually this answer gave me an idea on adding a span via jquery, Check my answer, the last one. PS. I dont like LOL. I prefer Dota 2. XD – Mark Lozano Jun 14 '17 at 03:52

necilAlbayrak · Answer 4 · 2017-06-13T12:33:20.807

0

var text = $('.property-info')[0].childNodes[0].data;

gives you text for node 0

and if you want to add something before or after this

$('.property-info')[0].childNodes[0].data = text + 'something';

edited Jun 13 '17 at 12:33

answered Jun 13 '17 at 12:26

necilAlbayrak

824
6
9

Shubham Baranwal · Answer 5 · 2017-06-13T12:49:13.533

0

You can try the below code for extracting only text and add whatever you want to add before it.

JSFiddle

HTML Code-

<div class="property-info">
  Beds: <strong>3</strong>
  <br> Baths: <strong>2</strong>
  <br> Sq. Ft.: <strong> 1,055 </strong>
  <br> Type: <strong>Condo</strong>
  <br>
</div>

JAVASCRIPT Code-

var data = $(".property-info").contents();
console.log(data);
count = 0;
for (i = 0; i < data.length; i++) {
  if (data[i].nodeName == "#text" && data[i].nodeValue.trim().length > 0) {
    data[i].nodeValue = "icon code goes here" + data[i].nodeValue;
    console.log(data[i].nodeValue);
  }
}

edited Jun 13 '17 at 12:49

answered Jun 13 '17 at 12:33

Shubham Baranwal

2,492
3
14
26

Hi @Shubham I find this interesting and it does insert the icons before it. But the case is i will use different icons for each one of them. That is why I need to select each one of them. – Mark Lozano Jun 13 '17 at 13:06
@MarkLozano you can insert different icons with each text by putting conditions over text value. – Shubham Baranwal Jun 13 '17 at 17:59

Mark Lozano · Answer 6 · 2017-06-14T04:23:51.563

I tried all your answers and still did some research.

Here's what I came up to:

This Code "wraps" all the nodes with a "span", I added a class "text_nodes" on it.

jQuery(function() {
   jQuery('.property-info')
  .contents()
  .filter(function() {
    return this.nodeType == Node.TEXT_NODE;
  }).wrap('<span class="text_nodes"/>');
});

And Because the text nodes are now wrap up, I can easily select them individually via css and add the icons as "content".

 <div class="property-info">
 <span class="text_nodes">Beds:</span><strong>3</strong> 
 <br> 
 <span class="text_nodes">Baths:</span> <strong>2</strong> 
 <br> 
 <span class="text_nodes">Sq. Ft.:</span> <strong> 1,055 </strong> 
 <br> 
 <span class="text_nodes">Type:</span> <strong>Condo</strong> 
 <br>
 </div>

Here's the css code that I used to add icons. (PS I used unicodes for icons)

.property-info > span:nth-child(1):before {
    content: '\f236';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}

.property-info > span:nth-child(2):before {
    content: '\f2cd';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}

.property-info > span:nth-child(3):before {
    content: '\f015';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
}

Here's how it looks now.

Thank you very much for those who helped and answered. You all gave Me an idea on how to solve this problem. :)

How to select the second text node via JQUERY

6 Answers6