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背景变色。
/// <summary>
/// 高亮或变色显示搜索关键字代理
/// </summary>
/// <param name="inputText">搜索源字符</param>
/// <param name="searchWord">搜索关键字</param>
/// <returns>搜索关键字高亮或变色后的搜索源字符</returns>
public string HighlightText(string inputText, string searchWord)
{
if (!string.IsNullOrEmpty(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));
}
else
{
return string.Empty;
}
}
该方法可结合前台JS调用:
<style type="text/css"> .highlightTxtSearch { background-color:Yellow; } </style>
JS:
//**************************************************************** //* 名 称:搜索结果中关键字变色效果 //* 作 者:XXX //* 功 能:搜索结果中关键字变色效果 //@param {data} 源数据 //@param {keyword} 关键字 //@param {url} 获取变色字体方法的URL //前台条用示例: // GetNewData(data, $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val()),'@Url.Action("HighlightText","Domain")'); //***************************************************************** function GetNewData(data, keyword, url) { if (keyword == "") { return "<div style='text-align:left;' title=" + data + ">" + data + "</div>"; } else { var returnData = ""; $.ajax({ type: "POST", //dataType: "application/x-www-form-urlencoded; charset=utf-8", url: url + "?inputText=" + encodeURI(data) + "&searchWord=" + encodeURI(keyword), //解决中文乱码 async: false, success: function (newdata) { //重新赋值 returnData = newdata; }, error: function () { //不修改returnData值 } }); return "<div style='text-align:left;' title=" + data + ">" + returnData + "</div>"; } }
EasyUI Datagrid控件:
field: 'LoginName', title: '@ViewBag.LoginName', width: 180, align: 'left', formatter: function (data) {
//return "<div class='hiddenFontGommom' style='text-align:left;'>" + data + "</div>";
var keyword = $.trim($("#txtInfo").val()) == '@ViewBag.SearchText' ? "" : $.trim($("#txtInfo").val());
return GetNewData(data, keyword, '@Url.Action("HighlightText","Base")');
阿里云: www.aliyun.com
华赐软件: www.huacisoft.com
C#开源社区: www.opencsharp.net
清泓美肤苑: 清泓美肤苑
bootstrap权限管理系统: Asp.Net Mvc3 bootstrap权限管理系统