给搜索关键字添加高亮,加以颜色区分
问题描述:
如图中所示,当我单击按专业搜索时,筛选出专业中包含有关键字的专业,并且讲输入的关键字用其他颜色区分开来。结果中每个学校和每个专业都是链接<a>.
实现方法:
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"); //获得所有专业标签——<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 = '<em style="color:blue; font-style:normal;">' + keyword + "</em>"; //将关键字添加一个蓝色样式
- 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
属性将发生更改以与该匹配项的末尾位置相匹配。
在给定的字符串 str
中执行正则表达式搜索。
如果没有 为正则表达式设置 g
(global
) 标志,则从字符串的开头位置(索引位置 0)开始搜索;搜索将忽略正则表达式的 lastIndex
属性。
如果为正则表达式设置 了 g
(global
) 标志,将从正则表达式的 lastIndex
属性指定的索引位置开始搜索。 如果搜索与子字符串相匹配,lastIndex
属性将发生更改以与该匹配项的末尾位置相匹配。
参数
str:String
— 要搜索的字符串。
返回
Object
— 如果没有匹配项,则返回 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
-