Hassang Hassang - 3 years ago 159
HTML Question

How to extract html from certain position to another and add an attribute to it using JavaScript?

I have this html :

<ul>
<li><a href="img/karate/image1.jpg">Image 1</a></li>
<li><a href="img/karate/image2.jpg">Image 2</a></li>
<li><a href="img/boxing/image3.jpg">Image 3</a></li>
<li><a href="img/karate/image4.jpg">Image 4</a></li>
<li><a href="img/kungfu/image5.jpg">Image 5</a></li>
</ul>

<button type="button">Red Color</button>


I want to :


  1. Locate the word
    karate
    inside the list, then go back to the closest
    <li>

  2. Mark it (the
    <li>
    tag) as the start position.

  3. The end position would be its closing
    </li>
    tag.

  4. Store the result in a string variable.

  5. Add/append this attribute :
    style="color:red;"
    to the
    <li>
    tag.

  6. All this by hitting the button, and using JavaScript.



The result : Image 1, Image 2 and Image 4 will be colored Red, Image 3 and Image 5 will be ignored.

I don't want to use JQuery or imported JS file like Cherrio because I want to understand every line !

I found things called web scraping, robots crawling... but i still can't understand it so any help would be much much appreciated.

Thank you very much.

Answer Source

"use strict";

let button = document.querySelector('#button');
button.addEventListener('click', onButtonClick);

function onButtonClick() {
    let urls = document.querySelectorAll('a');

    for (let i = 0, max = urls.length; i < max; i++) {

        if (urls[i].href.indexOf('karate') !== -1) {
        
            if(urls[i].parentNode.tagName === 'LI') {
                urls[i].parentNode.className = 'makeRed';
            }
            
        }
    }
}
.makeRed, .makeRed a {
  color: #FF0000;
}
<ul>
    <li><a href="img/karate/image1.jpg">Image 1</a></li>
    <li><a href="img/karate/image2.jpg">Image 2</a></li>
    <li><a href="img/boxing/image3.jpg">Image 3</a></li>
    <li><a href="img/karate/image4.jpg">Image 4</a></li>
    <li><a href="img/kungfu/image5.jpg">Image 5</a></li>
</ul>

<button type="button" id="button">Red Color</button>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download