给搜索关键字添加高亮，加以颜色区分

标签：

问题描述：

如图中所示，当我单击按专业搜索时，筛选出专业中包含有关键字的专业，并且讲输入的关键字用其他颜色区分开来。结果中每个学校和每个专业都是链接<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 属性将发生更改以与该匹配项的末尾位置相匹配。 

3、exec(str:String):Object

在给定的字符串 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

给搜索关键字添加高亮，加以颜色区分

标签：

原文地址：http://www.cnblogs.com/lovely_life/p/4602492.html