react字符串匹配關(guān)鍵字高亮問題
更新時(shí)間：2022年12月02日 10:09:05 作者：狗蛋今天睡醒了嗎
這篇文章主要介紹了react字符串匹配關(guān)鍵字高亮問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
react字符串匹配關(guān)鍵字高亮
const sqlstring = ["ADD","ALL","ALTER","ANALYZE","AND","AS","ASC","ASENSITIVE","BEFORE","BETWEEN","BIGINT","BINARY","BLOB","BOTH","BY","CALL","CASCADE","CASE","CHANGE","CHAR","CHARACTER","CHECK","COLLATE","COLUMN","CONDITION","CONNECTION","CONSTRAINT","CONTINUE","CONVERT","CREATE","CROSS","CURRENT_DATE","CURRENT_TIME","CURRENT_TIMESTAMP","CURRENT_USER","CURSOR","DATABASE","DATABASES","DAY_HOUR","DAY_MICROSECOND","DAY_MINUTE","DAY_SECOND","DEC","DECIMAL","DECLARE","DEFAULT","DELAYED","DELETE","DESC","DESCRIBE","DETERMINISTIC","DISTINCT","DISTINCTROW","DIV","DOUBLE","DROP","DUAL","EACH","ELSE","ELSEIF","ENCLOSED","ESCAPED","EXISTS","EXIT","EXPLAIN","FALSE","FETCH","FLOAT","FLOAT4","FLOAT8","FOR","FORCE","FOREIGN","FROM","FULLTEXT","GRANT","GROUP","HAVING","HIGH_PRIORITY","HOUR_MICROSECOND","HOUR_MINUTE","HOUR_SECOND","IF","IGNORE","IN","INDEX","INFILE","INNER","INOUT","INSENSITIVE","INSERT","INT","INT1","INT2","INT3","INT4","INT8","INTEGER","INTERVAL","INTO","IS","ITERATE","JOIN","KEY","KEYS","KILL","LEADING","LEAVE","LEFT","LIKE","LIMIT","LINEAR","LINES","LOAD","LOCALTIME","LOCALTIMESTAMP","LOCK","LONG","LONGBLOB","LONGTEXT","LOOP","LOW_PRIORITY","MATCH","MEDIUMBLOB","MEDIUMINT","MEDIUMTEXT","MIDDLEINT","MINUTE_MICROSECOND","MINUTE_SECOND","MOD","MODIFIES","NATURAL","NOT","NO_WRITE_TO_BINLOG","NULL","NUMERIC","ON","OPTIMIZE","OPTION","OPTIONALLY","OR","ORDER","OUT","OUTER","OUTFILE","PRECISION","PRIMARY","PROCEDURE","PURGE","RANGE","READ","READS","REAL","REFERENCES","REGEXP","RELEASE","RENAME","REPEAT","REPLACE","REQUIRE","RESTRICT","RETURN","REVOKE","RIGHT","RLIKE","SCHEMA","SCHEMAS","SECOND_MICROSECOND","SELECT","SENSITIVE","SEPARATOR","SET","SHOW","SMALLINT","SPATIAL","SPECIFIC","SQL","SQLEXCEPTION","SQLSTATE","SQLWARNING","SQL_BIG_RESULT","SQL_CALC_FOUND_ROWS","SQL_SMALL_RESULT","SSL","STARTING","STRAIGHT_JOIN","TABLE","TERMINATED","THEN","TINYBLOB","TINYINT","TINYTEXT","TO","TRAILING","TRIGGER","TRUE","UNDO","UNION","UNIQUE","UNLOCK","UNSIGNED","UPDATE","USAGE","USE","USING","UTC_DATE","UTC_TIME","UTC_TIMESTAMP","VALUES","VARBINARY","VARCHAR","VARCHARACTER","VARYING","WHEN","WHERE","WHILE","WITH","WRITE","X509","XOR","YEAR_MONTH","ZEROFILL"]
//所有sql關(guān)鍵字
const sqlText = () => {
let reg ;
let reg1 = /\(([^)]*)\)/; //括號中的數(shù)字
let reg2 = /".+"/; //雙引號內(nèi)容
let reg3 = /`.+`/; //反引號內(nèi)容
let newstr = 'select * from ? where ? like "%?%" or ? = ? or ? = ? or ? = ? (111) `content`' //實(shí)驗(yàn)用的sql語句
sqlstring.map(item => {
reg = new RegExp(`${item} `, "ig");
newstr = newstr.replace(reg, ` <span style='color: #3b91f1;'>$&</span> `)
newstr = newstr.replace(reg1, ` <span style='color: #58ca71;'>$&</span> `)
newstr = newstr.replace(reg2, ` <span style='color: #f06674;'>$&</span> `)
newstr = newstr.replace(reg3, ` <span style='color: #6b808b;'>$&</span> `)
//這里替換的前后兩個(gè)變量必須一樣
})
let html = {__html:newstr};
return <div className={styles.sqlStr} dangerouslySetInnerHTML={html}></div> ;
}
<Popover placement="rightTop" content={sqlText} trigger="click" visible={true}>
<Button style={{height: '30px'}} type='primary'>展示SQL語句</Button>
</Popover>
//我的渲染條件比較苛刻，邏輯就是這個(gè)邏輯了
唯一的bug就是正則只要匹配到了就會變色，如果要求更嚴(yán)謹(jǐn)?shù)脑捬芯空齽t即可
標(biāo)記高亮關(guān)鍵字 react
標(biāo)記指定關(guān)鍵字高亮（以單個(gè)文字、字母為單位，不區(qū)分大小寫）
/**
* 標(biāo)記指定關(guān)鍵字高亮（以單個(gè)文字、字母為單位，不區(qū)分大小寫）
* @param {string} text 需要處理的原字符串
* @param {string} key 需要標(biāo)記的字符串
*/
export function keySingleRender(text, key) {
if (key && text && typeof text === 'string' && typeof key === 'string') {
const newTextArr = text.split("").map(t => {
return key.toLowerCase().indexOf(t.toLowerCase()) > -1 ? `<Fragment class="redTip">${t}</Fragment>` : t;
});
const newText = newTextArr.join("");
return (<span dangerouslySetInnerHTML={{ __html: newText }} />);
} else {
return text;
}
}
標(biāo)記指定關(guān)鍵字高亮（以關(guān)鍵字的特殊字符分隔后的數(shù)組單個(gè)值為單位（以詞組為單位），不區(qū)分大小寫）
/**
* 標(biāo)記指定關(guān)鍵字高亮（以關(guān)鍵字的特殊字符分隔后的數(shù)組單個(gè)值為單位，不區(qū)分大小寫）
* @param {string} text 需要處理的原字符串
* @param {string} key 需要標(biāo)記的字符串關(guān)鍵字
*/
// 特殊字符
const specialCharater = new RegExp("[`~!@#$%^&*()\\-+={}':;,\\[\\].<>/?￥…（）_|【】‘；：”“'。，、？\\s]");
export function keyRender(text, key) {
if (key && text && typeof text === 'string' && typeof key === 'string') {
const keyArr = key.split(specialCharater).filter(k => k);
const newText = text.replace(
new RegExp(keyArr.join("|"), "ig"),
str => `<Fragment class="redTip">${str}</Fragment>`
);
return (<span dangerouslySetInnerHTML={{ __html: newText }} />);
} else {
return text;
}
}
標(biāo)記后端返回的分詞高亮（以指定的任意數(shù)組來高亮文本，不區(qū)分大小寫）
需要高亮的詞組：key = [“成都樂開”,“樂開有限”,“A”]；
文本： text = “成都樂開有限公司a成都成都”;
/**
* 標(biāo)記指定關(guān)鍵字為紅色（不區(qū)分大小寫）
* @param {string} text 需要處理的原字符串
* @param {Array} key 需要標(biāo)記的字符串關(guān)鍵字組成的數(shù)組
*/
export function keyArrRender(text, key) {
if (text && typeof text === 'string' && Array.isArray(key) && key.length > 0 ) {
let charIndexCache = {};
let allKeys = [], matchWords, i;
let textOrigin = text;
text = text.toLowerCase();
for (i = 0; i < key.length; i++) {
matchWords = text.match(new RegExp(key[i].replace(/([^\w]{1})/ig,"\\$1"), "ig"));
if(matchWords){
if(matchWords.length > 1){
allKeys.push(matchWords);
}else{
allKeys.push(matchWords[0]);
}
}
}
const readChar = (text, word) => {
let indexStart = text.indexOf(word);
if(indexStart >= 0){
let replaceWord = "";
let indexEnd = indexStart + word.length;
for (let i = indexStart; i < indexEnd; i++) {
if(!charIndexCache[i]){
charIndexCache[i] = text.charAt(i);
}
replaceWord += "#";
}
text = text.replace(word, replaceWord);
}
return text;
}
allKeys.forEach(function(word){
if(typeof word === "string"){
readChar(text, word.toLowerCase());
}else{
let textCopy = text.substring(0);
for (let i = 0; i < word.length; i++) {
textCopy = readChar(textCopy, word[i].toLowerCase());
}
}
});
let word = "", newText = "";
for(let i = 0, len = text.length; i < len; i ++){
if(charIndexCache[i]){
if(!word){
newText += "<Fragment class='redTip'>";
}
word += textOrigin.charAt(i);
if(i === text.length - 1){
newText += word + "</Fragment>";
}
}else{
if(word){
newText += word + "</Fragment>";
word = "";
}
newText += textOrigin.charAt(i);
}
}
return (<span dangerouslySetInnerHTML={{ __html: newText }} />);
} else {
return text;
}
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了React jsx文件介紹與使用方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react事件綁定時(shí)。this并不會指向當(dāng)前DOM元素。往往使用bind來改變this指向，今天通過本文給大家介紹React事件綁定的方式，感興趣的朋友2021-07-07
react ant-design Select組件下拉框map不顯示的解決
這篇文章主要介紹了react ant-design Select組件下拉框map不顯示的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中父組件如何獲取子組件的值或方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem
這篇文章主要介紹了詳解react內(nèi)聯(lián)樣式使用webpack將px轉(zhuǎn)rem，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
React錯(cuò)誤邊界Error Boundaries詳解
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹2022-12-12
react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決
這篇文章主要介紹了react路由跳轉(zhuǎn)傳參刷新頁面后參數(shù)丟失的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
在 React中是不存在雙向數(shù)據(jù)綁定的機(jī)制的，需要我們自己對其進(jìn)行實(shí)現(xiàn)。本文主要介紹一下React雙向數(shù)據(jù)綁定，感興趣的可以了解一下2021-11-11
React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能
在React中,可以使用useState和useEffect鉤子來實(shí)現(xiàn)錨點(diǎn)定位功能,在Vue中,可以使用指令來實(shí)現(xiàn)錨點(diǎn)定位功能,在React和Vue中實(shí)現(xiàn)錨點(diǎn)定位功能的方法略有不同,下面我將分別介紹,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07