react字符串匹配关键字高亮

╰半夏微凉° 2022-12-08 04:23 278阅读 0赞

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关键字
    const sqlText = () => { 
        let reg ;
        let reg1 = /\(([^)]*)\)/; //括号中的数字
        let reg2 = /".+"/; //双引号内容
        let reg3 = /`.+`/; //反引号内容
        let newstr = 'select * from ? where ? like "%?%" or ? = ? or ? = ? or ? = ? (111) `content`' //实验用的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> `)
        	//这里替换的前后两个变量必须一样
        	
        })
        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>
    //我的渲染条件比较苛刻，逻辑就是这个逻辑了

唯一的bug就是正则只要匹配到了就会变色，如果要求更严谨的话研究正则即可![效果][20200917165620393.png_pic_center]

[20200917165620393.png_pic_center]: /images/20221123/75701d25bd444e2b81f4ea81c3058537.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关匹配关键字搜索内容高亮

export const codeText = (keyWord, content) => { const searchArray = keyWord.s

骑猪看日落/ 2023年01月18日 04:14/ 0 赞/ 235 阅读

相关关键词高亮：HTML字符串中匹配跨标签关键词

![format_png][] > 来源：木马啊 > > 转载自：https://wintc.top/article/59 很久之前写过一个Vue组件，可以匹配文本内容中

妖狐艹你老母/ 2022年12月25日 07:54/ 0 赞/ 207 阅读

相关 react字符串匹配关键字高亮

const sqlstring = ["ADD","ALL","ALTER","ANALYZE","AND","AS","ASC","ASENSITIVE","BEFO

╰半夏微凉°/ 2022年12月08日 04:23/ 0 赞/ 279 阅读

相关 Vue 实现检索关键字高亮

需求：检索列表，匹配搜索关键字部分高亮首先判断返回字符中是否包括该关键字，如果包括则进行样式修改。效果图： ![watermark_type_ZmFuZ3poZW5n

电玩女神/ 2022年11月07日 13:19/ 0 赞/ 391 阅读

相关文章内容关键字替换、高亮

// 高亮关键词 highLightKeywords(article) { // article是传入的参数文章内容 // keyWo

你的名字/ 2022年02月25日 09:39/ 0 赞/ 418 阅读

相关 js实现关键字高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>j

约定不等于承诺〃/ 2021年12月22日 06:11/ 0 赞/ 537 阅读

相关关键字高亮查询

1.1.1 需求分析所谓高亮，就是使用特别的样式修饰某字段中包含的搜索关键字。需求：实现搜索高亮，商品名称使用红色显示搜索关键字。 1.1.2实现思路使用

朱雀/ 2021年12月05日 05:21/ 0 赞/ 490 阅读

相关 Android 搜索结果匹配关键字且高亮显示

1. 单关键字匹配如果只是单关键字的话，那么我们先计算出他的下标，它的长度，然后就可以标记下标到下标+长度的这一段为特殊颜色即可，代码如下： if (name

╰+攻爆jí腚メ/ 2021年09月26日 05:10/ 0 赞/ 681 阅读

相关 js实现关键字匹配高亮显示

需求：用户输入文字之后，调用后台接口查询匹配关键字（模糊搜索），并把匹配到的关键字进行高亮显示。实现思路：将拿到的数据进行拆分，例如：用户输入“羽毛球“，接口返回数据...

你的名字/ 2021年01月19日 17:30/ 0 赞/ 1194 阅读

相关 solr搜索关键字高亮显示

solr搜索关键字高亮显示主要步骤: 后端: 1.高亮选项初始化 HighlightQuery query=new SimpleHighlightQuery(); H...

朱雀/ 2020年10月24日 00:23/ 0 赞/ 1117 阅读