使用 JavaScript 和 CSS 查找自定义文本并更改其颜色

Question

我正在构建一个站点，刚刚遇到 WordPress 和自定义主题的限制，我可以轻松注入自定义 Js 或 CSS，所以我的问题是......

如何在内容中找到★并设置其颜色

更多关于符号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');

知道了！ 如果有人搜索此解决方案，我将保留下面的标签

css、unicode、颜色、javascript、查找

Answer 2

您可以遍历整个 dom 并搜索匹配项。

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';
                }
            }
        }
    }

我使用了这段代码： https://stackoverflow.com/a/6132212/8781059