经常在编译器和浏览器上使用command+f(mac)或ctrl+f(windows)查找某些字符,最近在复习正则以及字符串的一些方法所以写了个小demo模拟了这个小功能。
主要使用了:
正则execexec() 方法用于检索字符串中的正则表达式的匹配。
返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 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,可能有不足,希望大家多多指正。