Link to home
Start Free TrialLog in
Avatar of MJ
MJFlag for United States of America

asked on

How to get first Set of Words Returned by jQuery

If there are two instances this returns
var welcome = $("a.c-nav__link.js-nav__link.align-item-center.c-nav__link--flex.active").text();

Open in new window

How do I get the first occurrence of the words? I tried welcome[0] but that only returns the first letter? Sometimes there is only one word but sometimes there are two words:

"Loan Applications

Loan Applications"

or

"Borrower

Borrower"
Avatar of Chinmay Patel
Chinmay Patel
Flag of India image

You can try

var words = welcome.split(" ");
alert(words[0]);
if(words[1])
{
alert(words[1]);
}

Open in new window


I have kept your variable word to keep it as close to your snippet as possible. Ideally, you could add .split(" ") after .text().
ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You could use the :first selector to get the first instance then the .split() method to get the first word.

var first_word = $("a.class_x:first").text().split(' ')[0];

Open in new window


The above code will work in the case of two instances :

<a href="#" class="class_x">Loan Applications</a>
<a href="#" class="class_x">Loan Applications</a>

Open in new window


Working Fiddle

Also for one instance like :

<a href="#" class="class_x">Borrower</a>
<a href="#" class="class_x">Borrower</a>

Open in new window


Working Fiddle
Let us look at what is happening here.
<div class="fruit">banana</div>
<div class="fruit">orange</div>
<script>
$(function() {
  var welcome = $('.fruit').text();
  console.log(welcome);
});
</script>

Open in new window

jQuery functions return a jQuery object which is made up of various properties including index values for each instance of the selector found. In other words if there are two matching elements then the properties "0" and "1" will exist on the object containing node elements for each item found.

In this case there is more than one element that matches the selector (class="fruit").

If we look at how the jQuery text() function works it iterates over all index properties in the object concatenates their text values together. So the output of the above will be
bananaorange

Open in new window

Which does not help us in terms of splitting the string unless you know exactly what you are going to be getting back - which is unlikely.

A better solution would be to leave the text() off and only use it when you need to in other words
var welcome = $('.fruit');

Open in new window

Now you can access the node elements directly with an index
welcome[0]
welcome[1]

Open in new window

However, you need to remember that the elements of the array are not jQuery objects but node elements so to access the text value you either need to wrap them in a jQuery object
$(welcome[1]).text();

Open in new window

Or access the node properties directly
welcome[1].textContent;

Open in new window

Avatar of MJ

ASKER

I haven't tested any solutions yet due to the holiday here but I wanted to make clear that I wanted "Loan Applications" and  "Borrower" returned. I don't just want the first word returned but the first group of words returned, removing the duplicate.

Thanks~
Ok could you please post an example of the HTML structure that you have?
Refer to my solution above - you will get both groups of words exactly as required.
Avatar of MJ

ASKER

Thank you all!