实现模糊搜索结果的关键词高亮显示(CV查看结果)了解清楚实现模糊搜索结果的关键词高亮显示到底是一种怎么样的存在，是解决一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #main {
        width: 200px;
    }

    #main input {
        width: 200px;
        box-sizing: border-box;
    }

    #hints div {
        width: 200px;
        flex-direction: column;
    }

    #hints div:hover {
        background-color: rgb(242, 242, 242);
    }
</style>

<body>

    <div id="main">
        <input id="inputBar" type="text">
        <div id="hints">

        </div>
    </div>

</body>
<script>

    //防抖方法
    function debounce(fn, timeout = 300) {
        let time = false;
        return (...args) => {
            if (time) {
                clearTimeout(time);
                time = setTimeout(() => {
                    fn(...args);
                }, timeout)

            } else {
                time = setTimeout(() => {
                    fn(...args);
                }, timeout)
            }
        }
    }


    let inputBar = document.getElementById('inputBar');
    let hintNode = document.getElementById('hints');

    //重置提示
    let reset = () => {
        hintNode.innerHTML = "";
    }

    //生成对应的html文本内容
    let getHints = (data, key) => {
        let validHints = data.filter((v, i) => v.includes(key));
        if (validHints.length == 0) return;

        let hintText = '';

        for (let hint of validHints) {
            let left = hint.slice(0, hint.indexOf(key)),
                right = hint.slice(hint.indexOf(key) + key.length);
            hintText +=
                `<div><span>${left}</span><span style='color:blue;'>${key}</span><span>${right}</span></div>`;
        }

        hintNode.innerHTML = hintText;
    };

    //对结果调用方法做防抖处理
    let showHint = debounce(getHints);

    //模拟数据
    let data = ["地铁", "地铁一号线", "地铁二号线", "地铁线路图", "地铁三号线", "地铁四号线", "无关1", "无关2", "地铁五号线", "地铁六号线", "地铁七号线", "地铁八号线",
        "无关3", "地铁九号线", "地铁十号线",
        "地铁十一号线", "南京东路(地铁站)", "豫园(地铁站)"
    ]


    //监听input事件
    inputBar.addEventListener('input', (e) => {
        reset();
        if (inputBar.value.trim()) {
            showHint(data, inputBar.value);
        }
    })
</script>

</html>