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>