js关键词变色,数组打乱,数组去重的实现和封装

1.前言

今天,把自己之前封装过的一部分小功能操作分享出现,都是一些可以说是比较常用,实现起来比较简单,代码又比较少的一些功能或操作,比如关键词变色,数组打乱,数组去重等。

2.关键词变色

这个功能很常见,特别是在搜索引擎执行搜索的时候。其它不多说了,直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关键词变色</title> 
<style type="text/css"> 
span{color:red} 
</style> 
<script type="text/javascript">
//创建正则字符
function createExp(strArr)
{
  var str="";
  for(var i=0;i<strArr.length;i++)
  {
    if(i!=strArr.length-1)
    {
      str=str+strArr[i]+"|";
    }
    else
    {
      str=str+strArr[i];
    }
  }
  
  return "("+str+")";
}
//替换标签,往关键字前后加上标签
function findKey(key,id)
{
  var arr=null;
  var regStr=null;
  var content=null;
  var Reg=null;
  var theObj=document.getElementById(id);
  arr=key.split(/\s+/);
  regStr=createExp(arr);
  //alert(regStr); //    如:(前端|过来)
  content=theObj.innerHTML;
  //过滤html标签
  content=content.replace(/<\/?[^>]*>/g,'');
  Reg=new RegExp(regStr,"g");
  //alert(Reg);//        /如:(前端|过来)/g
  theObj.innerHTML=content.replace(Reg,"<span>$1</span>");
}
window.onload=function()
{
  var btn=document.getElementById("btn");
  btn.onclick=function(){
      var key=document.getElementById("text").value;
      findKey(key,"thediv");
  }
}
</script>
</head> 
<body> 
<div id="thediv">前端工程师新人在前端的道路上还有很多路要走,比如一些刚在学校读出来的前端,最需的是真正的看一场真实的前端开发项目过程(个人觉得这个非常有必要),其次,前端的覆盖面非常广,要了解的知识也非常多,所以如果能得到过来人的前端工程师网的一些建议性的话,将是帮助很大的。以下摘自一个前端工程师过来人的一点感悟。</div>
<input type="text" id="text" /><input type="button" value="搜索" id="btn" />
</body> 
</html>

运行一下

就是要这个效果! 实现原理和过程:首先,点击按钮的时候获取文本框的value,通过以空格分割,变成一个数组(arr=key.split(/\s+/);),然后把数组传到createExp(),创建一个正则的字符,比如上面就是传['前端','过来'],然后createExp()就会返回(前端|过来),再到就是通过创建一个正则(前端|过来)/g,最后就是把#thediv的内容进行正则匹配,比如:所有‘前端’就会被替换成<span>前端</span>。 这里值得注意的一点,就是,进行正则匹配之前,一定要过滤掉内容的html标签,避免影响下一次的运行,如果不过滤,就是这个bug

大家都看到了吧,我只输入‘过来’,结果‘前端’也变色了,那是因为我输入‘过来’的时候,之前就输入过‘前端’运行了一次,下一次不清除就会有这个bug,清除了就没事了!

2.打乱数组

打乱数组这个,也是比较常用吧,上代码

 function upsetOrder(arrOld,num){
        var result=[],_length=num||arrOld.length,arr;
        arr=Object.assign([],arrOld)
        for(var i=0,len=arr.length;i<len;i++){
            result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);
        }
        return result;
    }

运行一下

实现原理和过程:核心代码就是result.push(arr.splice(Math.floor(Math.random()*arr.length),1)[0]);,这个的原理就是每一次往result里面push一个元素,这个元素是从arr里面随便获取的。 这里值得注意的一点,arr=Object.assign([],arrOld)这行代码就是为了,打乱的结果不影响原来的数组。比如传进来时[1,2,3],执行了原来的数组还是[1,2,3]。只是产生了一个新的打乱的数组而已。

3.数组去重

数组去重,相信大家遇到的就多了,无论是面试题还是项目需要,多少都会遇到过。去重的方法很多,我主要说两种方法。

第一种

function removeReapt(arrOld){
    var arr=[];
    for(var i=0,len=arrOld.length;i<len;i++){
        if(arr.indexOf(arrOld[i])==-1){
            arr.push(arrOld[i]);
        }
    }
    return arr;
}

运行一下

这个的实现原理和过程没什么好说的了,就是遍历原来的数组arrOld,判断arr有没有当前遍历到的数组元素,没有加添加进去。

第二种

第一种方法,表面上看是一层循环,但实际可以说是两层,至少在运行速度上是两层循环的速度。因为indexOf这个方法也是逐个比较的。所以我就再说第二种方法。

function removeReapt(arrOld){
    var arr= [];
    var json = {};
    for(var i = 0,len = arrOld.length; i < len; i++){
        if(!json[arrOld[i]]){
            arr.push(arrOld[i]);
            json[arrOld[i]] = 1;
        }
    }
    return arr;
}

运行一下

效果一下样!

实现原理和过程:遍历原数组。每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复,如果访问不到,就是arr还没有没有这元素,就添加进去,同时把这个元素作为json的一个属性,并赋值为1。这个方法,我个人觉得比较效率比第一种方法好,也不安按理解,推荐这个写法。

后续

关于js是实用或者常用的小功能操作,今天先到这里,以后再写其它的,希望能帮到大家!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【学习】数据分析之SPSS数据分组案例

当我们的样本量过大,譬如以前讲过的,EXCEL2010最大只支持1048576行、16384列,尤其是当行数大于30万,一般的办公电脑处理都比较吃力,所以推荐做...

4869
来自专栏Golang语言社区

Golang 中 for-loop 和 goroutine 的问题

00. 背景 最近在学习MIT的分布式课程6.824的过程中,使用Go实现Raft协议时遇到了一些问题。参见如下代码: for i := 0; i < len(...

4667
来自专栏Crossin的编程教室

【Python 第27课】 list切片

list有两类常用操作:索引(index)和切片(slice)。 昨天我们说的用[]加序号访问的方法就是索引操作。 除了指定位置进行索引外,list还可以处理负...

3487
来自专栏GreenLeaves

JS框架设计之命名空间设计一种子模块

命名空间 1、种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分。 2、种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调...

23310
来自专栏编程

Shell 中的命令替换及参数扩展

今天和大家分享的主要是 “命令替换” 以及 “参数扩展” 。 -- 季文康 本文导航 ◈ 前言 00% ◈ 什么是命令替换 14% ◈ 1、一层 SHELL 嵌...

2089
来自专栏用户2442861的专栏

最简单的JavaScript模板引擎

 在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的。。...

4361
来自专栏我的小碗汤

为什么在Go语言中要慎用interface{}

在掘金上看到一篇从java转Go思想上的变化以及对go语言思考的文章,写的很透彻,我也推敲了一遍。这里也分享给大家,或许对将要或者已经学习golang的同学有所...

1532
来自专栏守候书阁

重构 - 保持函数的单一职责

上篇文章写了添加扩展性方面的重构,讲到了开放封闭原则。学习的步伐不能就此停止,今天的文章,将会提及开发的另一个原则:单一职责原则。通俗点说就是一个函数只做一件事...

40815
来自专栏腾讯Bugly的专栏

如何定位Obj-C野指针随机Crash(三):如何让Crash自报家门

本文主要介绍如何利用OC Runtime的特性,让OC野指针对象主动抛出自己的信息,秒杀某些全系统栈Crash。 ? 陈其锋,腾讯SNG即通产品部音视频技术中心...

8544
来自专栏菩提树下的杨过

Silverlight之ListBox/Style学习笔记--ListBox版的图片轮换广告

ListBox是一个很有用的控件,其功能直逼Asp.Net中的Repeater,它能实现自定义数据项模板,纵向/横向排列Item(如果扩展一下实现自行折行,几乎...

2325

扫码关注云+社区

领取腾讯云代金券