搜索关键字的高亮效果

最新推荐文章于 2024-09-16 11:45:42 发布

WE丕样

最新推荐文章于 2024-09-16 11:45:42 发布

阅读量512

点赞数 1

分类专栏：原生JS 文章标签：原生js 搜索高亮

本文链接：https://blog.csdn.net/Wq_2977/article/details/90177190

版权

原生JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html:

<div class="contaner">
    <div class="search_box">
        <input type="text" class="" placeholder="搜索" autofocus/>
    </div>
    <ul>
        <li>你好，在的呢！</li>
        <li>你好，有什么需要帮助的吗？</li>
        <li>好的，马上帮你转售后。你贵姓</li>
        <li>不能退款的呢。</li>
        <li>这都超过十天了</li>
        <li>好吧，无能为力了</li>
        <li>这款卖的超好哦</li>
        <li>你眼光真不错</li>
        <li>有什么想咨询的吗？</li>
        <li>马上下班了哦</li>
    </ul>
</div>

js:

let input = document.getElementsByTagName('input')[0];
    let liList = document.getElementsByTagName('li');
    input.oninput = function () {
        let inVal = this.value;
        if(inVal.length > 0){
            for(let n of liList){
                let nText = n.innerText;
                if(nText.indexOf(inVal) < 0){
                    n.style.display = 'none';
                }
                else{
                    n.style.display = 'block';
                    nText = nText.replace(eval("/"+inVal+"/g"), "<mark>" + inVal + "</mark>");
                    n.innerHTML = nText;
                }
            }
        }else{
            for(let n of liList){
                // 当没有搜索内容时，显示每一项
                n.style.display = 'block';
                // 获取每一项下面的mark元素
                var cancel = n.getElementsByTagName('mark');
                // 如果存在mark元素
                if(cancel.length > 0){
                    n.innerHTML = n.innerText;
                }
            }
        }
    }