问题描述:

如图中所示,当我单击按专业搜索时,筛选出专业中包含有关键字的专业,并且讲输入的关键字用其他颜色区分开来。结果中每个学校和每个专业都是链接.

实现方法:

1.首先找到专业这一列:

var filterResultTable = document.getElementById("searchResult");//找到结果集合table。searchResult为table的id

for (var i = 1; i < filterResultTable.rows.length; i++) {//从第二行开始,因为第一行是标题

var majorColumn  = filterResultTable.rows[i].cells[1];               //专业取cells[1]第二列

var tdSpans = majorColumn.getElementsByTagName("a");       //获得所有专业标签——标签

var count = tdSpans.length;

for (var j = 0; j < count; j++) {

tdSpans[j].innerHTML = eachColor(tdSpans[j], keyword); //eachColor(tdSpans[j], keyword)方法是将含有关键字的内容添加高亮显示

}

}

2.编写高亮方法:

function eachColor(tag, keyword) {    //tag是HTML标签,keyword是搜索关键字

var changeKeyword = '' + keyword + "";     //将关键字添加一个蓝色样式

var reg = RegExp(keyword, "g");     //RegExp方法下面详细说明

return tag.innerHTML.replace(reg, changeKeyword); //将原来没有样式的关键字替换成新的有样式的关键字

}

3.同时这里备注一下RegExp方法:

RegExp是个动态类。

1、初始化RegExp类的两种方法

RegExp(re:String, flags:String) ---允许使用两个字符串来构造正则表达式。 一个字符串定义正则表达式的模式,另一个字符串定义正则表达式中使用的标志。

re:正则表达式的模式(也称为构造函数字符串)。 这是正则表达式的主要部分(“/”字符之间的部分)。

flags:正则表达式的修饰符。 其中包括:

g -- 使用 String 类的 replace() 方法时,指定此修饰符可替换所有匹配项,而不只替换第一个匹配项。 此修饰符对应于 RegExp 实例的 global 属性。

i -- 计算正则表达式时不 区分大小写。 此修饰符对应于 RegExp 实例的 ignoreCase 属性。

s -- 点 (.) 字符与换行符相匹配。 请注意,此修饰符对应于 RegExp 实例的 dotall 属性。

m -- 尖号 (^) 字符和美元符号 ($) 在换行符之前和之后匹配。 此修饰符对应于 RegExp 实例的 multiline 属性。

x -- 忽略 re 字符串中的空白字符,所以您可以编写更加易读的构造函数。 此修饰符对应于 RegExp 实例的 extended 属性。

创建RegExp 实例:

var re1:RegExp = new RegExp("bob", "i");//通过构造函数

var re2:RegExp = /bob/i;  //直接字面值创建

如果遇到有'/'符号的可以使用'/'来转义符号,例如:

var re2:RegExp=new RegExp ("/ab","g");

var res:RegExp=/\ab/g;//使用反斜杠来代替

2、lastIndex属性

指定字符串中开始进行下一次搜索的索引位置。 此属性影响 RegExp 类的 exec() 和 test() 方法。 但是 String 类的 match()、replace() 和 search() 方法会忽略 lastIndex 属性,并从字符串的起始处开始进行所有搜索。 如果下一个字符没有和正则表达式匹配,那么它会跳到下一个字符查找,直到查找到匹配的字符。例如下面的例子,

var re:RegExp=/\w/g;//'\w'表示与任何单词字符匹配,包括下划线。等价于"[A-Za-z0-9_ ]"。

var str:String="a b c_ d";

trace(re.lastIndex);//0----开始搜索第一个字符,默认是为-1的

trace(re.test(str));//true     test用来返回是否和正则表达式匹配

trace(re.lastIndex);//1    字符时' '空格,没有匹配,所以搜索下一个字符

trace(re.test(str));//true   字符时b,匹配到

trace(re.lastIndex);//3    字符时c,可以匹配

trace(re.test(str));//true   字符是c,下一个字符是空格不匹配

trace(re.lastIndex);//5      下一个字符时'_'可以匹配

trace(re.test(str));//true    字符是'_',下一个字符时空格,不匹配

trace(re.lastIndex);//6

trace(re.test(str));//true   字符是d,下一次没有字符了

trace(re.lastIndex);//8

//上面的例子就是在验证这一句话:如果搜索与子字符串相匹配,lastIndex 属性将发生更改以与该匹配项的末尾位置相匹配。

3、exec(str:String):Object

在给定的字符串 str 中执行正则表达式搜索。

如果没有 为正则表达式设置 g (global) 标志,则从字符串的开头位置(索引位置 0)开始搜索;搜索将忽略正则表达式的 lastIndex 属性。

如果为正则表达式设置 了 g (global) 标志,将从正则表达式的 lastIndex 属性指定的索引位置开始搜索。 如果搜索与子字符串相匹配,lastIndex 属性将发生更改以与该匹配项的末尾位置相匹配。

参数

返回

null;否则,将返回具有以下属性的对象:

一个数组,其中元素 0 包含完全匹配的子字符串,其它元素(1 到 n)包含与正则表达式中的括号组相匹配的子字符串

index -- 匹配的子字符串在字符串中的字符位置

input -- 字符串 (str)

例如:

var pattern:RegExp = /\w\d/g;

var str:String = "a1 b2 c3 d4";

pattern.lastIndex = 2;

trace(pattern.lastIndex);//2

trace(pattern.exec(str)); // b2  返回的是一个数组,描述的返回的内容

trace(pattern.lastIndex); // 5

trace(pattern.exec(str)); // c3

trace(pattern.lastIndex); // 8

trace(pattern.exec(str)); // d4

trace(pattern.lastIndex); // 11

trace(pattern.exec(str)); // null

mysql搜索关键字高亮_给搜索关键字添加高亮,加以颜色区分相关推荐

  1. seo网站关键词优化-搜索词和搜索结果观察_百度搜索

    本篇通过2个搜索内容来介绍一下百度搜索内容和搜索结果之间的关系观察. 话不多说直捣黄龙. 例1:在百度首页搜索框中输入"200x100热镀锌槽式直通价格"进行搜索 1.搜索内容分词 ...

  2. 百度搜索限定时间_提高搜索能力必备技巧(建议收藏)

    在现代这个信息洪流中,快速搜索到需要的信息对我们的生活和工作效率不言而喻."百度竞价排名 魏则西事件"更以惨痛的事实说明搜索技能的重要性. 我也是在搜索能力上吃亏后,认真学习了搜索 ...

  3. java 关键字高亮_关于搜索功能的关键字高亮显示是如何实现的

    jq中的实现方法: //搜索结果高亮显示 function encode(s) { return s.replace(/&/g, "&").replace(//g, ...

  4. mysql against无法搜索出结果_在搜索少于4个字符的字符串时,MATCH AGAINST在MySQL中不显示记录...

    检查您的ft_min_word_len系统变量.这定义了要索引的单词的最小长度. 更新:好的我用ft_min_word_len=3做了一些测试 首先是一张测试表 CREATE TABLE `test` ...

  5. 谷歌黑搜索怎么收_谷歌搜索持久的反黑种族主义

    谷歌黑搜索怎么收 重点 (Top highlight) When Algorithms of Oppression was published in 2018, it was a landmark w ...

  6. 百度搜索结果 转换_百度搜索搜不到“百度拦截搜索结果”

    今天有网友爆料,使用第三方浏览器搜索内容,会被百度全部被拦截到自家app推广页面,对于这件事情,大家疯狂吐槽,并表示愤慨,而"百度拦截搜索结果"也成功进入了微博热搜.事件过去没多久 ...

  7. 代码高亮_微信公众号代码高亮美化工具 Markdown Nice

    微信公众号代码高亮美化工具 使用 Chrome 浏览器把右侧生成的页面直接拷贝到微信中即可. https://www.mdnice.com/ // 目录[TOC] 1. Markdown Nice 简 ...

  8. 搜索关键字高亮_Django Haystack 全文检索与关键词高亮

    作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取 博客提供 RS ...

  9. 修改element ui tree 搜索功能,实现分级搜索,关键字高亮

    element ui 里面的tree 自带的搜索功能是默认搜索的全部数据,有关键字的显示,没有的不显示 需求: 在element UI tree 原有功能不变的情况下新加 1)搜索 tree 时,如果 ...

最新文章

  1. window.print()前端实现打印功能
  2. 10.LeetCode第九题--有效的数独--哈希表的经典应用
  3. vue单位文本控件与vue加密文本控件
  4. Struts2_模块包含 及Action总结
  5. Shell脚本编程基础笔记一
  6. 语义分割之PointRend论文与源码解读
  7. 织梦手机版list.php,织梦一级目录作域名list.php无法跳转到手机站解决方法
  8. spring 注入 list和map及enum映射
  9. HTML5七夕情人节表白网页制作【流星动画3D相册】HTML+CSS+JavaScript
  10. jvisualvm插件安装
  11. matlab分式函数求解,科学网—用MATLAB编写预估-校正法程序求分数阶常微分方程组数值解 - 王福昌的博文...
  12. 看我是怎样捣鼓Linux的
  13. go每日新闻(2021-04-01)——令牌桶的实现 rate/limt
  14. 机器学习中的F1-score
  15. 国外工业互联网安全现状分析(政策;标准;厂商;产品)
  16. json to excel java_java解析json生成excel
  17. android高仿京东快报(垂直循环滚动新闻栏)
  18. 语音对讲软件_微信语音转播软件哪个好?你有没有推荐的呢?
  19. 基于Springboot+vue的甜品蛋糕销售商城网站 elementui
  20. libvirt理解总结

热门文章

  1. 程序员相亲:有人被小三,有人却重逢初中同学!
  2. 计算机依赖英语作文,网络依赖症英语作文 How Will Our Life Go on without Internet?
  3. 5 Go与微信开发与Web安全
  4. 上海中心大厦的云计算机房,上海IDC机房大全(非常全面 果断收藏)
  5. Pytorch矩阵乘法之torch.mul() 、 torch.mm() 及torch.matmul()的区别
  6. OpenGL画圆柱体
  7. 11月8日 O2O众包配送平台技术分享,java、python、ios也可现场应聘
  8. Kitty Spangles Solitaire for Mac(趣味纸牌游戏)
  9. php如何调用c++,在C++中如何调用php
  10. 国内研究团队提出通过非侵入性脑机超表面平台实现人脑直接无线通信