// 我們先假設有一個叫做 #content 的 parent

const parentNode = document.querySelector('#content');


const range1 = new Range();
range1.setStart(parentNode, 10); // 這裡的 10 是指從 parentNode 的第 11 個 element 開始
range1.setEnd(parentNode, 20); // 這裡的 20 是指到 parentNode 的第 20 個 element 結束

const range2 = new Range();
range2.setStart(parentNode, 30);
range2.setEnd(parentNode, 40);

1
// 通常你不會一個個建立變數，他可能會是一個 Array，所以我們先模擬這個情況
2
const ranges = [range1, range2];
3

4
const highlight = new Highlight(...ranges);

5
CSS.highlights.set('highlight1', highlight)

6
CSS.highlights.delete('highlight1') // 移除 highlight1
7
// 或
8
CSS.highlights.clear() // 清除所有 highlight

/* 你可以放在某個 .css 檔案中或是放在 <style></style> 中 */

::highlight(highlight1) {
    background-color: yellow;
}

<div id="content">
    Nam eget sem non sapien egestas pulvinar eu sit amet lorem.
</div>

const content = document.getElementById('#content');

const text = content.childNodes[0];

const range = new Range();

range.setStart(content, 56);

range.setEnd(content, 61);

const highlight = new Highlight(range);
CSS.highlights.set("content", highlight);

::highlight(content) {
    background-color: yellow;
}

<div id="content">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non magna velit. Fusce non viverra turpis, sit amet faucibus enim. Sed tincidunt, diam vitae lobortis cursus, mauris neque cursus lacus, vel ornare nulla massa non augue. Morbi cursus id metus sagittis suscipit. In vitae venenatis libero. Nam facilisis tortor et nibh pretium finibus. Integer eget dolor sagittis, vestibulum enim feugiat, pulvinar ligula. Nunc hendrerit ac nunc nec dapibus. Aenean sit amet placerat est, eu congue leo. Morbi quis lectus id lorem maximus ultricies. Curabitur a sapien eget odio rutrum egestas eu at sem. Donec ut mauris eu diam euismod lobortis. Praesent risus arcu, viverra nec posuere eu, sodales nec leo. Mauris id interdum purus.
    </p>
    <p>
        Curabitur pretium dapibus felis, eu congue sapien lobortis ac. Pellentesque convallis laoreet risus, a mattis dui sollicitudin eget. Aenean sodales sed purus in varius. Aliquam hendrerit aliquam fringilla. Morbi eu lacinia metus, non pretium lacus. In elementum massa dolor, a ullamcorper neque malesuada eu. Donec tristique, velit bibendum convallis maximus, orci ligula euismod quam, eu varius felis odio porttitor massa. Nulla feugiat, dolor quis laoreet gravida, turpis ex aliquet mi, ac varius libero sapien et quam.
    </p>
    <p>
        Integer vulputate enim enim, a commodo dui varius nec. Morbi ut leo auctor, maximus tortor et, venenatis arcu. Suspendisse ac augue porttitor, molestie magna sit amet, gravida neque. Maecenas eu lorem sem. Aliquam ut velit tincidunt, bibendum dolor a, pharetra diam. In euismod ex vel tellus volutpat sollicitudin quis maximus mauris. Sed laoreet vestibulum leo.
    </p>
</div>

<input type="text" id="search" placeholder="Search...">

const content = document.getElementById("content");
const search = document.getElementById("search");

const treeWalker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);

const nodes = [];
let node;

while ((node = treeWalker.nextNode())) nodes.push(node);

search.addEventListener("input", (ev) => {

    CSS.highlights.clear();

    const ranges = [];
    const keyword = ev.target.value.trim().toLowerCase();

    nodes.forEach((node) => {
        for (let i = 0; i < node.length; i++) {

            const index = node.wholeText.toLowerCase().indexOf(keyword, i);

            if (index !== -1) {

                const range = new Range();
                range.setStart(node, index);
                range.setEnd(node, index + keyword.length);

                ranges.push(range);
            }
        }
    });

    const highlight = new Highlight(...ranges);
    CSS.highlights.set("content", highlight);
});

::highlight(content) {
    background-color: yellow;
}