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

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" >
  <ul >
    <li ><a href="">Homepage</a></li>

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

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

    <li >
      <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 3<span ></span></a>
      <ul >
        <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 >
      <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">

------->[TEXT I WANT TO EXTRACT]<-------
        <span ></span>
      </a>
      <ul >
        <li><a href="/account">My Account</a></li>
        <li role="separator" ></li>
        <li >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 >
      <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">Menu - 5<span ></span></a>
      <ul >
        <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 >
      <a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true"
        aria-expanded="false">

------->[TEXT I WANT TO EXTRACT]<-------
        <span ></span>
      </a>
      <ul >
        <li><a href="/account">My Account</a></li>
        <li role="separator" ></li>
        <li >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?

CodePudding user response：

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 ></span>
  </a>
  <ul >
    <li><a href="/account">My Account</a></li>
    <li role="separator" ></li>
    <li >Help</li>
    <li><a href="/contact">Contact Us</a></li>
    <li ><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;

CodePudding user response：

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();