javascript 搜索功能的模拟demo (command+f（mac）或ctrl+f（windows）)

最新推荐文章于 2022-10-27 14:45:31 发布

chancejl

最新推荐文章于 2022-10-27 14:45:31 发布

阅读量1.1k

点赞数 1

文章标签：搜索 javascript 正则字符串操作 exec

本文链接：https://blog.csdn.net/qq_39833794/article/details/80658543

版权

经常在编译器和浏览器上使用command+f（mac）或ctrl+f（windows）查找某些字符，最近在复习正则以及字符串的一些方法所以写了个小demo模拟了这个小功能。

主要使用了：

正则exec

exec() 方法用于检索字符串中的正则表达式的匹配。

返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

这个数组中input 属性则存放的是被检索的字符串 string。index 属性声明的是匹配文本的第一个字符的位置。

字符串方法：

substr 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

substring 方法用于提取字符串中介与两个指定下标之间的字符。

有需求的出需要使用正则匹配，使用str的substr来抽取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body.div{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 99%;
            height: 99%;
            position: absolute;
            top: 0;
            left: 0;
            border: 2px solid black;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            margin: 0 auto;
            font-size: 1.5rem;
        }
        .acti{
            position: fixed;
            bottom: 20px;
            left: 20px;
            border: 2px solid black;
            padding: 5px;
        }
        button{
            width: 60px;
            height: 20px;
            background:lightblue;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="container" id="container" contenteditable="true">
    一个刚入前端的小菜，虽然以前看到过关于回调的文章，但是呢，理解起来有点费劲啊。当时的脑海里就一个概念。

    回调：大多出现在Ajax请求，用于处理收到的请求结果。

    嘿嘿，当时真的就是这一个想法啊。现在真的入这行，而且这个概念也非常重要，用的地方太多太多，是时候把它捡起来好好理解一番。

    当然，本文适合菜鸟，因为我是以一个菜鸟的思维去理解的。

    回调概念
    理解一个新东西，很有必须去理解下它的概念，因为这是最简洁明了，前人总结的。

    A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

    中文意思：回调是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。
    有点绕，好，咱们说大白话。就是 B函数被作为参数传递到A函数里，在A函数执行完后再执行B。

    下面咱们看看代码怎么实现回调。

    function A(callback){
    console.log("I am A");
    callback();  //调用该函数
    }

    function B(){
    console.log("I am B");
    }

    A(B);
    这应该是最最简单的回调了，我想大家应该明白回调的释义了吧。
    当然，这么简单的同步回调代码是不会用的，现实中用都是相对比较复杂带传参。
</div>
<div class="acti">
    <textarea name="" id="search" cols="100" rows="10" style="font-size: 1.2rem;"></textarea>
    <button>find</button>
    <button>prev</button>
    <button>all</button>
</div>
<script>
//获取元素
var container = document.getElementById('container');
var search = document.getElementById('search');
var findBtn = document.getElementsByTagName('button')[0];
var prevBtn = document.getElementsByTagName('button')[1];
var allBtn = document.getElementsByTagName('button')[2];

//一些要调用的参数
var search_obj={
    old:'',
    new:'',
    index:0,
    input:'',
    arr:[]
};

//下一个搜索键
findBtn.onclick = function() {
    // search_obj.arr=[];
    changeColor(function(){
        search_obj.index++;
        if(search_obj.index == search_obj.arr.length){
            search_obj.index = 0;
        }
    })
};

//上一个搜索键
prevBtn.onclick = function(){
    changeColor(function(){
        search_obj.index--;
        if(search_obj.index < 0){
            search_obj.index = search_obj.arr.length - 1;
        }
    })
};

//搜索全部键
allBtn.onclick = function(){
    var source = container.innerHTML;
    var reg = new RegExp(search.value, 'g');
    source = source.replace(reg,'<span style="background:red">'+ search.value +'</span>');
    container.innerHTML = source;
};


//封装改变颜色
function changeColor(callback){
    var source = container.innerHTML;
    search_obj.new = search.value;
    var reg = new RegExp(search_obj.new, 'g');
    if (search_obj.old == search_obj.new) {
        //新旧data一样，不第一次查询
       callback();
    } else {
        while (result = reg.exec(source)) {
            // console.log(result);
            search_obj.old = result[0];
            search_obj.input = result.input;
            search_obj.arr.push(result.index);
        }
    }
    console.log(search.value);
    var start = search_obj.input.substr(0,search_obj.arr[search_obj.index]);
    var end = search_obj.input.substr(search_obj.arr[search_obj.index]+search.value.length);
    var newStr = start + '<span style="background:yellow">'+ search.value +'</span>'+ end;
    container.innerHTML = newStr;
}


</script>
</body>
</html>

自己写的小demo，可能有不足，希望大家多多指正。

chancejl

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javascript 搜索功能的模拟demo (command+f（mac）或ctrl+f（windows）)

经常在编译器和浏览器上使用command+f（mac）或ctrl+f（windows）查找某些字符，最近在复习正则以及字符串的一些方法所以写了个小demo模拟了这个小功能。主要使用了：正则execexec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。这个数组中input 属性则存放的是被检索的字符串 string。index ...
复制链接

扫一扫