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', 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")');
原文地址:https://www.cnblogs.com/8090sns/p/2920558.html