react字串匹配關鍵字高亮

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};
    //因為用了antd的組件所以要轉換成html，正常渲染可以不用轉，直接return 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就是正則只要匹配到了就會變色，如果要求更嚴謹的話研究正則即可