JS keyword color changing Implementation ideas and code

1. Replace the keyword to color the font
Copy codeThe Code is as follows:
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;
}

The disadvantage of this method is that when the dot character is a case-sensitive English character, it is replaced with the keyword case after the color changes, and the experience is poor.
2. Use regular expressions to change the color of CSS background.
Copy codeThe Code is as follows:
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>"; // background color of the keyword
// Return "<font color = '# ff0000'>" + m. Value + "</font>"; // keyword color changing
}

This method can be called in combination with foreground JS:
Copy codeThe Code is as follows:
<Style type = "text/css">
. HighlightTxtSearch
{
Background-color: Yellow;
}
</Style>

Copy codeThe Code is as follows:
<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 ){
/// Assign a value again
// ReturnData = newdata;
//},
// Error: function (){
/// Do not modify the returnData Value
//}
//});
// 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: 'e-mail ', title:' @ ViewBag. E-mail ', width: 180, align: 'left', formatter: function (data ){
Return "<div class = 'hiddenfontgommom 'style = 'text-align: left; 'title =" + data + ">" + data + "</div> ";
}
},
// {Field: 'domain', title: '@ ViewBag. domain', 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 ){
// Check box for removing multiple headers
$ (". Datagrid-header-check input" ).css ("visibility", "hidden ");
// Hide the page
// $ (". Datagrid-pager" ).css ("display", "none ");
// $ (". Datagrid-pager"). removeClass ("datagrid-pager ");
Return true;
},
OnLoadSuccess: function (data ){
If (data. rows. length = 0 ){
$ (". Datagrid-view2. datagrid-body "pai.html (" <div style = 'text-align: center; margin-top: 0px; height: 50px; '> "+ userManage_index_SearchMsg +" </div> ");
}
Else {
$ ('# Tt'). datagrid ('selectrecord', '@ ViewBag. adminid ');
$ ("Inputs [name = rd_action]", $ ("div. datagrid-view1 tr. datagrid-row-selected"). attr ("checked", "checked ");
}
$ ("Div. datagrid-header-check input"). removeAttr ("checked"); // remove the check box when reloading
// $ ('# 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 ){
$ ("Inputs [name = rd_action]", $ ("div. datagrid-view1 tr. datagrid-row-selected"). attr ("checked", "checked ");
}
});
Var p = $ ('# tt'). datagrid ('getpager ');
$ (P). pagination ({
PageNumber: 1,
PageSize: 10, // number of records displayed on each page. The default value is 10.
PageList: [5, 10, 15], // you can set a list of records per page
DisplayMsg: "" // 'current {from}-{to} records total {total} records ',
});
$ ("# 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], // you can set a list of records per page
DisplayMsg: "" // 'current {from}-{to} records total {total} records ',
});
})
$ (". 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"); // center the header content
});
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 ){
// Assign a value again
ReturnData = newdata;
},
Error: function (){
// Do not modify the returnData Value
}
});
Return "<div style = 'text-align: left; 'title =" + data + ">" + returnData + "</div> ";
// The data in the title should be separated from the subsequent data. Otherwise, the data in the title will be changed.
}
}
</Script>