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>