• 高亮显示搜索的关键词(二)


    上一篇关于高亮显示搜索的关键词,用的是个项个项高亮,需要用户一步一步点击,才能看到所有搜索到的位置,用的是DOM操作的聚焦和setCreateRange,一旦用户做其他操作(失焦),就是去高亮效果。

    下面使用的是多段落中的查找内容进行html替换,加上background: red样式。可以高亮显示所有查找出的关键词,并且不会失焦。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
        </head>
        <body>
            <label for="">key words:</label>
            <input type="text" id="key_words" />
            <button type="button" id="find_btn">find</button>
            <div id="content">
                乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注,也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计,再到iPhone5s的巅峰状态,但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高 (原因受安卓大屏冲击的影响,果粉对大屏手机的欲望愈加的浓烈),但是收到广泛吐槽也是最多的。大白条,尤其是突出的摄像头,乔布斯知道估计都能从坟里跳出来! 不喜欢的iPhone6的果粉可以等等了,iPhone7马上就要来临了,这是国外设计师设计出的一部iPhone7的概念图,这部iPhone7不仅做工精湛, 而且消除了打白条和涉嫌头突出问题,更重要的是采用了iPhone4的双面玻璃设计,边角做出了圆润设计,不仅时尚,而且商务气息十足, 适合追求时尚的年轻人和商务人士使用,受用人群更广泛了。
            </div>
        </body>
        <script type="text/javascript">
            var origin_text = document.getElementById("content").innerText;
            document.getElementById("find_btn").onclick = function() {
                var get_arr = [];
                var key_word = document.getElementById('key_words').value;
                var key_word_len = key_word.length;
                var index = origin_text.indexOf(key_word);
                while(index !== -1) {
                    get_arr.push(index);
                    index = origin_text.indexOf(key_word, index + 1);
                }
                
                selectedText = "<span style='background:red'>" + key_word + "</span>";
                var temp_str = '';
                for (var i = 0, search_len = get_arr.length; i < search_len; i++) {
                    temp_str += origin_text.substring(i === 0 ? 0 : get_arr[i-1] + key_word_len, get_arr[i]) + selectedText;
                }
                temp_str += origin_text.substring(get_arr[search_len-1] + key_word_len);
                document.getElementById("content").innerHTML = temp_str;
            };
        </script>
    
    </html>

    效果如下:

    本来想用replace方法,应该会更简洁,不用像上面那样一步一步的拼接了。若有其他办法的伙伴,请@我。

  • 相关阅读:
    Flush the AOS cache from code
    EntityConnectionStringBuilder 构造EF连接字符串
    AX中文转拼音
    AX2012 AOT中Web部署显示二级以上菜单
    clearCompanyCache
    AX2009 打印到PDF优化
    AX ODBC读取其他SQL数据库服务器数据
    AX2009报表打印固定长度Barcode条码
    Create Product Variant
    Rename AOT Object
  • 原文地址:https://www.cnblogs.com/bagexiaowenti/p/8017387.html
Copyright © 2020-2023  润新知