JS关键字变色实现思路及代码


Posted in Javascript onFebruary 21, 2013

1.替换关键字,对字体变色

public static string ReplaceRed(string strtitle, string redkey) 
{ 
if (redkey == "" || redkey == null) 
{ 
return strtitle; 
} 
else 
strtitle = strtitle.Replace(redkey, " <font color='#ff0000'>" + redkey + " </font>"); 
return strtitle; 
}

该方法缺点是:点字符是含大小写的英文时,变色后统一替换为了关键字的大小写,体验不好。
2.用正则,CSS背景变色
protected string HighlightText(string inputText,string searchWord) 
{ 
System.Text.RegularExpressions.Regex expression = new System.Text.RegularExpressions.Regex(searchWord.Replace(" ", "|"), System.Text.RegularExpressions.RegexOptions.IgnoreCase); 
return expression.Replace(inputText,new System.Text.RegularExpressions.MatchEvaluator(ReplaceKeywords)); 
} 
public string ReplaceKeywords(System.Text.RegularExpressions.Match m) 
{ 
return "<span class='highlightTxtSearch'>" + m.Value + "</span>";//关键字背景加色 
//return "<font color='#ff0000'>" + m.Value + "</font>";//关键字变色 
}

该方法可结合前台JS调用
<style type="text/css"> 
.highlightTxtSearch 
{ 
background-color:Yellow; 
} 
</style>

<script type="text/javascript"> 
$(function () { 
$('#tt').datagrid({ 
url: '@Url.Content("~/Domain/LoadDomainAdmin")', 
width: "90%", 
height: 400, 
fitColumns: true, 
nowrap: false, 
idField: 'UserID', 
pagination: true, 
pageNumber: 1, 
singleSelect: true, 
frozenColumns: [[{ field: 'radio', formatter: function (value, row, index) { 
return '<input type="radio" name="rd_action" />'; 
} 
}]], 
columns: [[ 
{ field: 'UserID', title: 'UserID', width: 260, hidden: 'true' }, 
{ field: 'LoginName', title: '@ViewBag.LoginName', width: 180, align: 'left', formatter: function (data) { 
//return "<div class='hiddenFontGommom' style='text-align:left;'>" + data + "</div>"; 
return GetNewData(data); 
} 
}, 
{ field: 'FirstName', title: '@ViewBag.FirstName', width: 120, align: 'left', formatter: function (data) { 
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
return GetNewData(data); 
// var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
// if (keyword == "") { 
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
// } 
// else { 
// var returnData = ""; 
// $.ajax({ 
// type: "POST", 
// url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword, 
// async: false, 
// success: function (newdata) { 
// //重新赋值 
// returnData = newdata; 
// }, 
// error: function () { 
// //不修改returnData值 
// } 
// }); 
// return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>"; 
// } 
} 
}, 
{ field: 'LastName', title: '@ViewBag.LastName', width: 120, align: 'left', formatter: function (data) { 
//return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
return GetNewData(data); 
} 
}, 
{ field: 'Email', title: '@ViewBag.Email', width: 180, align: 'left', formatter: function (data) { 
return "<div class='hiddenFontGommom' style='text-align:left;' title=" + data + ">" + data + "</div>"; 
} 
}, 
// { field: 'Domian', title: '@ViewBag.Domian', width: 180, align: 'left', formatter: function (data) { 
// return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
// } 
// }, 
// { field: 'Role', title: '@ViewBag.Role', width: 180, align: 'left', formatter: function (data) { 
// return "<div style='text-align:left;' class='hiddenFontGommom' title=" + data.replace(" ", "").replace(" ", "") + ">" + data + "</div>"; 
// } 
// }, 
// {field: 'IsEnabled', title: '@ViewBag.State', align: 'center', width: 150, formatter: function (val) { 
// if (val == true) 
// return "<div class='devicetypes_a_box'>True</div>"; 
// else 
// return "<div class='devicetypes_a_box'>False</div>"; 
// } 
// } 
]], 
onBeforeLoad: function (row, param) { 
//移除头部批量勾选框 
$(".datagrid-header-check input").css("visibility", "hidden"); 
//隐藏分页 
//$(".datagrid-pager").css("display", "none"); 
//$(".datagrid-pager").removeClass("datagrid-pager"); 
return true; 
}, 
onLoadSuccess: function (data) { 
if (data.rows.length == 0) { 
$(".datagrid-view2 .datagrid-body").html("<div style='text-align:center; margin-top:0px; height:50px;'>" + userManage_index_SearchMsg + "</div>"); 
} 
else { 
$('#tt').datagrid('selectRecord', '@ViewBag.AdminId'); 
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked"); 
} 
$("div.datagrid-header-check input").removeAttr("checked"); //重新加载时去掉复选框的选中 
//$('#tt').datagrid('unselectAll'); 
var queryParams = $('#tt').datagrid('options').queryParams; 
queryParams.IsSerach = "NO"; 
queryParams.DomainId = $("#xDomainId").val(); 
$('#tt').datagrid('options').queryParams = queryParams; 
}, 
// onSelect: function () { 
// ChSelect(); 
// }, 
// onUnselect: function () { 
// ChSelect(); 
// }, 
onClickRow: function (row) { 
$("input[name=rd_action]", $("div.datagrid-view1 tr.datagrid-row-selected")).attr("checked", "checked"); 
} 
}); 
var p = $('#tt').datagrid('getPager'); 
$(p).pagination({ 
pageNumber: 1, 
pageSize: 10, //每页显示的记录条数,默认为10 
pageList: [5, 10, 15], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {from} - {to} 条记录 共 {total} 条记录', 
}); 
$("#btn_search").click(function () { 
$("#importErrorMsg").find("div").css("display", "none"); 
var queryParams = $('#tt').datagrid('options').queryParams; 
queryParams.FullName = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
queryParams.IsSerach = "YES"; 
$('#tt').datagrid('options').queryParams = queryParams; 
$("#tt").datagrid('reload'); 
var p = $('#tt').datagrid('getPager'); 
$(p).pagination({ 
pageNumber: 1, 
pageList: [5, 10, 15], //可以设置每页记录条数的列表 
displayMsg: "" //'当前显示 {from} - {to} 条记录 共 {total} 条记录', 
}); 
}) 
$(".pagination-num").keydown(function (event) { 
var event = event || window.event; 
if (event.keyCode == 13) 
event.keyCode = 9; 
if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && (event.keyCode < 96 || event.keyCode > 105)) { 
event.preventDefault(); 
event.returnValue = false; 
} 
}); 
$(".datagrid-cell").css("textAlign", "center"); //表头内容居中 
}); 
function ChSelect() { 
// var row = $('#tt').datagrid('getChecked'); 
// var rows = $('#tt').datagrid('getRows'); 
// row.length == rows.length ? $("div.datagrid-header-check input").attr("checked", true) : $("div.datagrid-header-check input").removeAttr("checked"); 
} 
function GetNewData(data) { 
var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()); 
if (keyword == "") { 
return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; 
} 
else { 
var returnData = ""; 
$.ajax({ 
type: "POST", 
url: '@Url.Content("~/Domain/HighlightText")' + "?inputText=" + data + "&searchWord=" + keyword, 
async: false, 
success: function (newdata) { 
//重新赋值 
returnData = newdata; 
}, 
error: function () { 
//不修改returnData值 
} 
}); 
return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>"; 
//title中的data要和后面的data分开,不要后台返回的会让title中的data也跟着改变 
} 
} 
</script>
Javascript 相关文章推荐
javascript 节点遍历函数
Mar 28 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
JavaScript实现复选框全选功能
Apr 11 Javascript
js数组Array sort方法使用深入分析
Feb 21 #Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 #Javascript
jquery实现每个数字上都带进度条的幻灯片
Feb 20 #Javascript
javascript通过class来获取元素实现代码
Feb 20 #Javascript
javascript自适应宽度的瀑布流实现思路
Feb 20 #Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 #Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 #Javascript
You might like
php生成xml简单实例代码
2009/12/16 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue.use源码学习小结
2018/06/20 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
利用python实现数据分析
2017/01/11 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python实现树形打印目录结构
2018/03/29 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
建筑施工员岗位职责
2013/11/26 职场文书
投标单位介绍信
2014/01/09 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
个人租房协议书范本
2014/09/30 职场文书
创先争优宣传标语
2014/10/08 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python
JS class语法糖的深入剖析
2022/07/07 Javascript