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

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>

(0)

相关推荐

  • javascript 获取所有id中包含某关键字的控件的实现代码

    //获取某容器控件中id包含某字符串的控件id列表 //参数:容器控件.要查找的控件的id关键字.要查找的控件的标签名称 //返回值:查找到的控件id列表字符串,以逗号分割. 复制代码 代码如下: function GetIdListBySubKey(container,subKey,TagName) { var idList = ""; for(var i = 0; i < container.childNodes.length;i++) { if(container.chil

  • js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部,可以点击右上角菜单栏中的按钮来完成. 我

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • Javascript基础教程之关键字和保留字汇总

    关键字不可以作为变量名或者函数名 复制代码 代码如下: break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 保留字是为以后关键字而准备的 也不可以用来变量或者函数名. 复制代码 代码如下: abstract boolean byte char class c

  • JS关键字球状旋转效果的实例代码

    有时上网查资料,看到别人的博客上有关键字旋转的效果,觉得蛮不错的.于是网上搜索了一下它的实现,好吧,自己动手写写. HTML: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

  • JQuery+JS实现仿百度搜索结果中关键字变色效果

    1.源码 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#btn_1").click(function() { var $keyword = $("#Text1").val() setHeightKeyWord('bbb', $keyword, 'Red', true) }); }); function setHeightKeyWord(id, keyword

  • JavaScript保留关键字汇总

    JavaScript 标准 所有的现代浏览器已经完全支持 ES5(ECMAScript 5). JavaScript 保留关键字(keyword) Javascript 的保留关键字(标识符)不可以用作变量.标签或者函数名.有些保留关键字是作为 Javascript 以后扩展使用. abstract arguments boolean break byte case catch char class* const continue debugger default delete do doubl

  • Javascript中的关键字和保留字整理

    ECMA-262中描述了一组具有特定用途的关键字,可用于表示控制语句的开始或结束,或者用于执行特定操作等.规定:关键字属于语言保留,不可以用于标示符. ECMAScript的全部关键字(*为第五版新增): break do instanceof typeof case else new var catch finally return void continue for switch while debugger*   function this with default if throw de

随机推荐