zoukankan      html  css  js  c++  java
  • 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")');
  • 相关阅读:
    vue路由传参页面刷新参数丢失问题解决方案
    理解MVC,MVP 和 MVVM
    HTTPS用的是对称加密还是非对称加密?
    元素显示隐藏的9种思路
    CSS中层叠上下文
    DOM盒模型和位置 client offset scroll 和滚动的关系
    css重点知识和bug解决方法
    你可能不知道的CSS
    如何在 React 中优雅的写 CSS?
    html5不常用标签应用场景
  • 原文地址:https://www.cnblogs.com/8090sns/p/2920558.html
Copyright © 2011-2022 走看看