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

问题描述:

如图中所示,当我单击按专业搜索时,筛选出专业中包含有关键字的专业,并且讲输入的关键字用其他颜色区分开来。结果中每个学校和每个专业都是链接<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
时间: 2024-10-11 12:39:08

给搜索关键字添加高亮,加以颜色区分的相关文章

Lucene系列:(7)搜索关键字高亮

在搜索结果中,将与关健字相同的字符用红色显示 TestHighlighter.java package com.rk.lucene.d_highlighter; import java.util.ArrayList; import java.util.List; import org.apache.lucene.document.Document; import org.apache.lucene.index.IndexWriter; import org.apache.lucene.query

在 Angular 中实现搜索关键字高亮

在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

如何给wp(Windows phone)中搜索关键字加亮?

问题来源 最近在群里看到群友讨论在wp中有个搜索功能,要求搜索关键字在搜索结果内容中加亮(即加颜色),由于wp中没有自带这样的控件,于是大家各抒自见,有人说用第三方控件,有人说用richtextbox,也有人说用textblock和run!那究竟哪种实现比较好呢?个人看法,当然是用textblock和run实现起来是最方便的! 实现要求 1.给出关键字(如:我,购物,菜鸟,技术),关键字可以一个或者多个,多个用英文逗号隔开 2.能在搜索结果中对关键字进行加亮 3.能自定义加亮的颜色 4.要求复用

Android中ListView字母排序,实现字母挤压效果以及右侧快速选中字母,搜索关键字功能

Android中ListView字母排序,实现字母挤压效果以及右侧快速选中字母,搜索关键字功能 本文中阐述如何自定义EditText实现搜索框自定义的样式以及挤压字母的思路等 自定义EditText 相关的drawable文件 主界面以及相关的适配器 结果展示 定义要呈现的EditText的样式 public class ClearEditText extends EditText implements OnFocusChangeListener, TextWatcher { /** * 定义删

一段文字中的几个关键字显示高亮

将一段文字中的几个关键字显示高亮 示例:将"我的愿望是当个绿巨人,所以我想让我的皮(derma)肤是绿色"中的"皮肤"显示绿色. <span style="font-size:18px;">public class MainActivity extends Activity { private static TextView mTextView; //需要显示的文字 private static String keywords=&qu

搜索关键字更正 - Oracle Endeca Server

做了几个Oracle Endeca 电商项目.每个项目都会有搜过关键字拼写错误更正(Spelling Correction)的需求.淘宝也有类似功能. Oracle Endeca Sever提供了关键字拼写更正的功能.项目开发中一般只需要用这个Endeca预置功能,必要时做些调整就可.但是一直很好奇Endeca怎么知道用户拼写错了,怎么知道应该将用户输入的关键字更正为什么.闲来无事,查阅了一些资料.整理如下: Endeca Server为关键字更正提供了两种方式: 1. 自动更正 (Auto S

将搜索关键字设置为高亮显示实例代码

将搜索关键字设置为高亮显示实例代码:搜索关键词以高亮状态呈现是一种比较人性化的举措,例如百度或者本站都有这样的功能,可以极大的提高辨识度,下面就通过代码实例介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

仿百度壁纸客户端(五)——实现搜索动画GestureDetector手势识别,动态更新搜索关键字

仿百度壁纸客户端(五)--实现搜索动画GestureDetector手势识别,动态更新搜索关键字 我们重新来看看这个效果 想实现这个逻辑,其实就是监听两个View的显示隐藏加上一点小动画,所以我们在布局上是这样的 search_fragment.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.c

二叉搜索树(搜索、添加、遍历)——Java

栈.队列.链表都有他们各自的好处,同样的也有弊端的存在. 如果我想要一个有序的数组和链表这个当然很好实现.现在我要在这几个数据结构中查找一个值.先说数组,因为是有序的通过二分查找很快的就可以找到.查找的效率还是很高的,但如果要是插入呢,为了保证有序,我要先找到插入位置,然后再将比插入数字大的数字依次向后移动:这时的第一反应就是链表!他打插入速度很快,只要改变指针的指向就可以了.但是链表大查找要从头开始找啊.只有知道了前一个元素的地址才能知道下一个地址.所以链表查找起来又费劲了.这时候就有人引进了