Find a custom text and change its color using JavaScript and CSS

Question

I'm building a site and just met the limitations of WordPress and custom theme, tho I can inject custom Js or CSS easily, so my question is...

How to find ★ in content and set its color

More about symbol https://www.htmlsymbols.xyz/unicode/U+2605

Answer 1

var headings = document.evaluate("//li[contains(., '★')]", document, null, XPathResult.ANY_TYPE, null );
var thisHeading = headings.iterateNext();
thisHeading.setAttribute('style', 'color: #f1c40f');

Got it! I'm leaving the tags below in case someone searches for this solution

css, unicode, color, javascript, find

Answer 2

You can loop through the entire dom and search for matches.

let allElements = document.getElementsByTagName("*");
    for (let Element of allElements) {
        for (let childNode of Element.childNodes) {
            if (childNode.nodeType === 3) {
                let valueUpper = childNode.nodeValue.toUpperCase()
                if (valueUpper.includes(text)) {
                    Element.style.backgroundColor='#ff0000';
                    Element.style.color='#ffffff';
                }
            }
        }
    }

I used this code: https://stackoverflow.com/a/6132212/8781059