JSFiddle - React, Tailwind, and code Playground

by vikaskbh

HTML

<h2>Highlight all list items start with string PHP</h2>

<ul>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>ASP and PHP</li>
    <li>PHP and Perl</li>
    <li>Python</li>
</ul>

CSS

ul {
    list-style-type:none;
    width: 150px;
    border:1px solid #CCC;
    padding: 0;
    margin: 0;
}
h2 {
    margin: 0;
    padding: 0;
    font:bold 18px/50px arial, sans-serif
}
li {
    color:#000;
    font:bold 15px/24px arial, sans-serif;
    padding-left: 10px;
    margin-left: 0;
    border-bottom: 1px solid #ddd;
}

JavaScript

window.addEventListener("load", function () {
    var list_elems_pure = document.querySelectorAll("li");
    for (var i in list_elems_pure) {
        if (list_elems_pure[i].innerHTML.match(/^php/i)) {
            list_elems_pure[i].style.backgroundColor = "#FF0";
        }
    }
});

function toArray(selector) {
    elems = document.querySelectorAll("li");
    ret_elems = [];
    for (var i in elems) {
        if (elems[i].nodeType == 1) {
            ret_elems.push(elems[i]);
        }
    }
    return ret_elems;
}