CODEWITHSUNDEEP
javascripthtml
Stewie Griffin
Stewie Griffin

Reputation: 5608

How to extract specific text from a html tag that is dynamically placed in the code

I want to extract a specific text which is located between the <li></li> tags in the navigation bar of a html page, but the code's not consistent. The order of the navbar elements changes depending on the conditions that I'm unable to predict. The only thing that doesn't change in the code is the <li></li> tags where the text I want to extract is embedded.

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="">Homepage</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 1<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">Menu - 1 - Option - 1</a></li>
        <li><a href="">Menu - 1 - Option - 1</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 2<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">Menu - 2 - Option - 1</a></li>
        <li><a href="">Menu - 2 - Option - 2</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="">Menu - 2 - Option - 3</a></li>
        <li><a href="">Menu - 2 - Option - 4</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 3<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">Menu - 3 - Option - 1</a></li>
        <li><a href="">Menu - 3 - Option - 2</a></li>
      </ul>
    </li>

    <!-- The element I need to access -->
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">

------->[TEXT I WANT TO EXTRACT]<-------
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="/account">My Account</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Help</li>
        <li><a href="/contact">Contact Us</a></li>
        <li><a href="/logout">Logout</a></li>
      </ul>
    </li>
    <!-- The element I need to access -->


    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 5<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="">Menu - 5 - Option - 1</a></li>
        <li><a href="">Menu - 5 - Option - 2</a></li>
        <li><a href="">Menu - 5 - Option - 3</a></li>
      </ul>
    </li>
  </ul>
</div>

So, the following <li></li> tags of the code never changes, but its placement in the navbar changes:

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">

------->[TEXT I WANT TO EXTRACT]<-------
        <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="/account">My Account</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Help</li>
        <li><a href="/contact">Contact Us</a></li>
        <li><a href="/logout">Logout</a></li>
      </ul>
    </li>

When I try to extract the text using querySelector from JavaScript, it sometimes doesn't work because the <li></li> element is no longer the fifth one in the list. Thus, the selector doesn't match:

document.querySelector('li.dropdown:nth-child(5) > a:nth-child(1)');

What would be the safest way for me to extract this text?

Upvotes: 0

Views: 55

Answers (2)

Stewie Griffin
Stewie Griffin

Reputation: 5608

Using the filter method to find the right element is the solution to my issue. I just check whether the children of the specified tags contain a particular text that the element I want to access has. Then, I simply extract the text like the following:

// Retrieve all children inside of the navbar
Array.from(document.querySelectorAll(".nav > li.dropdown"))
     // Filter the child that contains the text
     .filter((el) => el.textContent.includes("Logout"))[0]
     // Extract the text from the child tag
     .querySelector("a").textContent.trim();

Upvotes: 0

Affan Ansari
Affan Ansari

Reputation: 13

Maybe you can give a class to the li that you want to extract and then select that class using querySelector. Here I am assuming you want to select the logout list element.

------->[TEXT I WANT TO EXTRACT]<-------
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="/account">My Account</a></li>
    <li role="separator" class="divider"></li>
    <li class="dropdown-header">Help</li>
    <li><a href="/contact">Contact Us</a></li>
    <li class="logout"><a href="/logout">Logout</a></li> //Here I have given a class 'logout'
  </ul>
</li>

Select that li element using querySelector

let text = document.querySelector('.logout').innerText;

Upvotes: 1

Related Questions