CODEWITHSUNDEEP
javascriptjqueryhtmlcssfind
AlexPixel
AlexPixel

Reputation: 439

How to select text inside an HTML element, based on content?

I want to find how many products are in a list or array inside a website. The one I want to it's called Course which is text inside the <strong > element.

I can select them all but how can I filter just the ones with the word COURSE I'm using development tools inside my browser.

Here is the code:

I use a selector for the class var e = document.querySelectorAll('.card-type');

`[<strong class=​"card-type">​Workshop​</strong>​, 
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Workshop​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​, 
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​,
 <strong class=​"card-type">​Course​</strong>​ ​]`

Upvotes: 2

Views: 1448

Answers (3)

AlexPixel
AlexPixel

Reputation: 439

Here is what I did step by step answer:

  1. Select the elements I want to:
    var e = document.querySelectorAll('.card-type');
  2. Make that variable into an Array:
    const f = Array.apply(null, e);
  3. Now filter with the New Array:
    let courses = f.filter(item => item.textContent === 'Courses');

And the 2 option if you don't want to convert to an ARRAY just loop NodeList.

let course = document.querySelectorAll('.card-type');

With the old good For Loop

for(let i = 0; i < course.length; i++) {
   console.log(course.item(i).innerText)
}

And IF statement for get the COURSE word ONLY

for (let i =0; i < course.length; i++) {
     if(course.item(i).innerHTML == "Course") 
     {
        console.log(course.item(i));
     }
}

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22405

Filter your list with filter.

let courses = e.filter(item => item.textContent === "Course");

This is using let and fat arrow syntax aka a lambda which are ES6 syntax. If you want ES5 JavaScript, simply use var and a normal anonymous function.

var courses = e.filter(function(item) {
    return item.textContent === "Course";
});

Edit: Kevin B spotted that my function will be undefined and he his right. That is because e is a NodeList and not an array. We have to convert it! There are multiple ways to convert a NodeList to an array. The easiest being splice. Or you can get fancy and use spread syntax [...e].filter or Array.from() as well, which are both also ES6 features.

Upvotes: 2

TankorSmash
TankorSmash

Reputation: 12767

Using jquery, you can do it in only a few lines, using .text() and .each().

$('.card-type').each(function(el, i) {
  var text = $(el).text();
    if (text == "Course") {
       console.log("found it");
    }
});

Basically you iterate through all the elements of the list, then check each one for the right content, and do something else with that.

You can use other things like filtering down, but it really all depends on what you're looking to do with the elements.

Upvotes: -1

Related Questions