I am currently working on a way to filter through the text of a website. There are divs and inside the divs are p elements which contain text and also the inn tags, which are relevant for the search. My idea was to loop over the divs and then for each div loop through the p tags and then loop over the inn tags and then only display the div if there is a p tag which contains the inn tag with the match. I dont want a plug in solution and if possible in js or jquery since I only work with these two languages.
In short, I want to hide all divs with 0 matches and also hide all p tags with 0 matches and I want to compare the filter with the innerText of the inn tags.
I have been looking up the w3schools search filter option, but I feel like I got stuck and I would appreciate some help or also input on other ways on how to approach this problem. Another question that I have is, that if I search for Fig.1 I also get the matches for Fig. 10 or Fig. 12. Is there a way to only show exact matches?
HTML
<div>
<p>
considerations for viable autonomous vehicle systems. The first is a standardization
of safety assurance, including requirements that every self-driving car must satisfy
to ensure safety, and how those requirements can be verified. The second is
scalability, as engineering solutions that lead to unleashed costs will not scale to
millions of cars and may prevent widespread or even not so widespread adoption of
autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
for safety assurance and a design of a system that adheres to safety assurance
requirements while being scalable to millions of cars.
<inn>Fig. 1</inn>
considerations for viable autonomous vehicle systems. The first is a standardization
of safety assurance, including requirements that every self-driving car must satisfy
to ensure safety, and how those requirements can be verified. The second is
scalability, as engineering solutions that lead to unleashed costs will not scale to
millions of cars and may prevent widespread or even not so widespread adoption of
autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
for safety assurance and a design of a system that adheres to safety assurance
requirements while being scalable to millions of cars.
<inn>Fig. 12</inn>
</p>
<p> The present disclosure relates generally to autonomous vehicle navigation. Additionally, this disclosure relates to systems and methods for navigating according to potential accident liability constraints.</p>
<p> considerations for viable autonomous vehicle systems. The first is a standardization
of safety assurance, including requirements that every self-driving car must satisfy
to ensure safety, and how those requirements can be verified. The second is
scalability, as engineering solutions that lead to unleashed costs will not scale to
millions of cars and may prevent widespread or even not so widespread adoption of
autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
for safety assurance and a design of a system that adheres to safety assurance
requirements while being scalable to millions of cars.
</p>
</div>
<div>
<p>
considerations for viable autonomous vehicle systems. The first is a standardization
of safety assurance, including requirements that every self-driving car must satisfy
to ensure safety, and how those requirements can be verified. The second is
scalability, as engineering
<inn>Fig. 10</inn>
solutions that lead to unleashed costs will not scale to
millions of cars and may prevent widespread or even not so widespread adoption of
autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
for safety assurance and a design of a system that adheres to safety assurance
requirements while being scalable to millions of cars.
</p>
<p> considerations for viable autonomous vehicle systems. The first is a standardization
of safety assurance, including requirements that every self-driving car must satisfy
to ensure safety, and how those requirements can be verified. The second is
scalability, as engineering solutions that lead to unleashed costs will not scale to
millions of cars and may prevent widespread or even not so widespread adoption of
autonomous vehicles. Thus, there is a need for an interpretable, mathematical model
for safety assurance and a design of a system that adheres to safety assurance
requirements while being scalable to millions of cars.
</p>
</div>
JS CODE
//declare all variables needed
var input, filter, figref, test;
input = document.getElementById('myInputDesc');
filter = input.value.toUpperCase().trim();
figref = document.getElementsByTagName('figref');
test = document.getElementsByTagName('div')
for (j = 0; j < test.length; j++) {
p = test[j].getElementsByTagName("p");
for (let i = 0; i < p.length; i++) {
fig = p[i].getElementsByTagName("inn");
if (fig.length == 0) {
p[i].style.display = "none";
} else {
for (let f = 0; f < fig.length; f++) {
ptxt = fig[f].innerText;
console.log(ptxt)
if (ptxt.toUpperCase() == filter) {
console.log(p[i])
p[i].style.display = "none";
} else {
console.log(test[j])
p[i].style.display = "block";
}
}
}
}
} ```