Add case-insensitive non-overlapping highlights to text

highlightText.js

function highlightText(text, highlights) {
    const lcText = text.toLowerCase();
    highlights = highlights.map(h => h.toLowerCase());

    let addedChars = 0;
    for (let i = 0; i < text.length; i++) {
        for (const highlight of highlights) {
            if (
                lcText[i] === highlight[0] &&
                lcText.substring(i, i + highlight.length) === highlight
            ) {
                const startIdx = i + addedChars;
                const endIdx = startIdx + highlight.length;
                const preHighlight = text.substring(0, startIdx);
                const highlighted = text.substring(startIdx, endIdx);
                const postHighlight = text.substring(endIdx);

                text = `${preHighlight}<b>${highlighted}</b>${postHighlight}`;
                addedChars += 7;
                i += highlight.length;
            }
        }
    }

    return text;
}