搜索结果高亮显示(不改变html标签)
一、问题的产生
搜索结果高亮显示,在新闻标题,来源之类的地方好做,只需要用str.Replace(keyword,"<font style=/"color:red;/"" + keyword +"</font>");这样的方法就可实现。
问题在于,在新闻内容里做搜索。其中html标签里可能含有关键字,用上面这种方法,将会替换掉html标签的部分内容,导致新闻内容不能正常显示。
例如:新闻内容里的图片<img alt="" src="Upload/1.jpg" />,搜索时使用的关键字为oa,则会将新闻内容中这张图片替换为<img alt="" src="Upl<font style="color:red;">oa</font>d/1.jpg" />,这张图片就显示不出来了。
二、实现原理
首先,将新闻内容里的所有html标签读出来,保存起来;
其次,将所有html标签替换为一般不可能出现的字符,如[[1]],[[2]]......[[N]]]等;(搜索的关键字一般不会是[[N]]吧,新闻内容里也一般不会出现这样的字符)
再次,将搜索结果替换为高亮显示状态;
最后,将html标签还原。
三、实现代码
以下代码是网上搜集的,来源不详,在此对作者表示感谢。
public static string Reg(string input, string replace)
{
//设置高亮样式
string replaceformat = "<span style=/"font-size:14px; font-weight:bold; color:#f00; {0}</span>";
System.Text.RegularExpressions.Regex reg = new System.Text.RegularExpressions.Regex(String.Format("{0}", replace), System.Text.RegularExpressions.RegexOptions.Multiline);
return reg.Replace(input, string.Format(replaceformat, replace));
}
/// <summary>
/// 设置各个html部分为自定义标号
/// </summary>
/// <param name="input">输入内容</param>
/// <param name="matches">匹配集合</param>
/// <returns>替换的字串</returns>
public static string protectHtml(string input, ref System.Text.RegularExpressions.MatchCollection matches)
{
//匹配html的正则
System.Text.RegularExpressions.Regex htmlReg =
new System.Text.RegularExpressions.Regex(@"/<.*?/>", System.Text.RegularExpressions.RegexOptions.Multiline);
//获取匹配集合
matches = htmlReg.Matches(input);
//设置替换字串
string markFormat = "[[{0}]]";
//替换html,记录位置
for (int i = 0; i < matches.Count; i++)
{
input = input.Replace(matches[i].Value, string.Format(markFormat, i));
}
return input;
}
/// <summary>
/// 将标号恢复html
/// </summary>
/// <param name="input">高亮设置好的字串</param>
/// <param name="matches">匹配集合</param>
/// <returns>最终字串</returns>
public static string restoreHtml(string input, System.Text.RegularExpressions.MatchCollection matches)
{
//设置替换字串
string markFormat = "[[{0}]]";
for (int i = 0; i < matches.Count; i++)
{
input = input.Replace(string.Format(markFormat, i), matches[i].Value);
}
return input;
}
使用方法:
System.Text.RegularExpressions.MatchCollection matches = null;
string temp = protectHtml(Contents, ref matches);//保护html标签
temp = Reg(temp, KeyWords);//替换关键字为高亮显示
Contents = restoreHtml(temp, matches);//恢复html标签
搜索结果高亮显示(不改变html标签)的更多相关文章
- Html 改变原有标签属性
内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时 ...
- asp实现关键词不区分大小写搜索并高亮显示
用ASP做搜索很容易,但要实现智能搜索这类就比较累一点,其实任何程序都差不多,主要还是看数据库的处理能力,一般小网站ASP经常跟ACCESS数据库搭配,在这种配置下我们要实现关键词不区分大小写搜索并高 ...
- DEDE的搜索页面支持arclist和channelartlist标签的操作方法
很多朋友在使用dedecms进行网站开发时都会存在这样的问题,那就是dedecms的搜索页(search.php)与我们网站页面的模板的头 部.底部不一样,并且还不支持在搜索页调用其他某一栏目的文档. ...
- spring data solr 搜索关键字高亮显示
spring data solr 搜索关键字高亮显示 public Map<String, Object> highSearch(Map searchMap) { Map map = ne ...
- 在HTML中改变input标签中的内容
在HTML中改变input标签的内容 1.使用js自带的方法: document.getElementById('roadName').value='武汉路';//通过标签选择器来选择标签,然后设置值 ...
- Angularjs^1.2.9 搜索关键字高亮显示
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情 ...
- javascript 搜索并高亮显示
2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者 ...
- jQuery的如何捕捉回车键,改变事件标签
我希望有一个jQuery的解决方案,我必须接近,有什么需要做的? $('html').bind('keypress', function(e) { if(e.keyCode == 13) { retu ...
- dedecms搜索模板,使用{dede:list}标签调用自定义字段不显示(空白)
前几天使用织梦做一个搜索功能,正常使用{dede:list}调用自定义内容模型中的自定义字段,代码如下:(自定义字段的调用可以参考:http://www.dede58.com/a/dedejq/523 ...
随机推荐
- day6_1
一.加密模块 1.hashlib >>> data=hashlib.md5() >>> data.update(b'hello') >>> pri ...
- android 横竖屏切换
解决Android手机 屏幕横竖屏切换 Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的 ...
- Flex加载google地图、百度地图以及天地图作底图
一 Flex加载Google地图作底图 (1)帮助类GoogleLayer.as /* * 根据输入的地图类型加载Google地图(by chenyuming) */ package Layers ...
- 链接测试工具xenu link sleuth的使用
链接测试工具xenu link sleuth的使用很简单. 可以从这里下载 http://home.snafu.de/tilman/xenulink.html 但是注意到: 如果需要登录才能进入所有的 ...
- CSS3基础01
一.选择器: 分为关系选择器 ,属性选择器 ,伪类选择器 1.1关系选择器 后代选择器 ul li 选择所有的后代元素 子代选择器 ul > li 选择ul的儿子 紧邻选择器 .b ...
- WPF TextBlock文本纵向排列
一.将TextBlock文本纵向排列输出有两种模式. 1.文字正常放置,只是纵向排列. 2.文字同样旋转90度,纵向排列. 二.详见下文实例 1.文本正常放置,纵向排列. (1)后台代码 string ...
- 配置 node.js 环境
安装 Node.js 1. 下载 Node.js, 首先到官网 http://nodejs.org/download/ 的下载页面下载 Windows 版本, 这里有两种版本,推荐 .msi 的安装程 ...
- SQL常用代码收集
1.存储过程中,使用in查询时的参数处理方式 使用情形描述:传入存储过程的参数为一个字符串@IDs,以固定分隔符连接 新建字符串分割函数,然后将分割结果传入存储过程: CREATE FUNCTION ...
- Linux Shell脚本入门--cut命令
Linux Shell脚本入门--cut命令 cut cut 命令可以从一个文本文件或者文本流中提取文本列. cut语法 [root@www ~]# cut -d'分隔字符' -f fields &l ...
- redis cluster搭建
一 .准备文件: Ruby :http://www.ruby-lang.org/en/downloads/ redis-3.0.5.tar.gz Redis:http://www.redis.c ...