1.js正則replaceAll+dangerouslySetInnerHTML={{ __html: xxx }}危險屬性

步驟最簡單,但是是危險屬性,不推薦使用,項目中實在沒有頭緒,可以使用它應(yīng)急

通過useMemo計算得到新的狀態(tài)值,賦值給dangerouslySetInnerHTML屬性的__html

關(guān)鍵代碼:

const [state1, setState1] = useState('我愛中國,中國愛我')const updateState1 = useMemo(() => {return state1.replaceAll('中國', '<span style="color:red;">中國</span>')}, [state1])<div dangerouslySetInnerHTML={{ __html: updateState1 }}></div>

2.useMemo計算遍歷后將關(guān)鍵字替換為React標簽寫法(內(nèi)容為關(guān)鍵字),使用_.map渲染

(要不是replace不能轉(zhuǎn)換為React標簽,只支持字符串也不用這么麻煩)

關(guān)鍵代碼:

const updateState2 = useMemo(() => {return highlightPassword(state2, '_.map_')}, [state2])function highlightPassword(str0: any, key_prefix?: string) {const password = '中國';const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}<p>map遍歷children元素:</p>{_.map(updateState2, (child) => {return child})}

3.遍歷后將關(guān)鍵字替換為React標簽寫法(內(nèi)容為關(guān)鍵字),使用ReactDOM.render方法插入到指定元素中

關(guān)鍵代碼:

const Test = () => {const [state2, setState2] = useState<any>('我愛中國,中國中國愛我')useEffect(() => {// 遍歷將關(guān)鍵字換成react寫法的標簽,使用ReactDOM.render方法渲染到頁面上const str = highlightPassword(state2, 'ReactDOM.render_')ReactDOM.render(<div>{str}</div>, document.getElementsByClassName('my-highlight-test')[0])}, [state2])function highlightPassword(str0: any, key_prefix?: string) {const password = '中國';const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}<p>ReactDOM.render方法:</p><div className="my-highlight-test"></div>

完整代碼示例:?

import React, { useEffect, useMemo, useState } from 'react'
import ReactDOM from 'react-dom';
import _ from 'lodash';const Test = () => {const [password,] = useState('中國')const [state1, setState1] = useState('我愛中國,中國愛我')const [state2, setState2] = useState<any>('我愛中國,中國中國愛我')useEffect(() => {// 遍歷將關(guān)鍵字換成react寫法的標簽,使用ReactDOM.render方法渲染到頁面上const str = highlightPassword(state2, 'ReactDOM.render_')ReactDOM.render(<div>{str}</div>, document.getElementsByClassName('my-highlight-test')[0])}, [state2])const updateState1 = useMemo(() => {return state1.replaceAll(password, str => `<span style="color:red;">${str}</span>`)}, [state1])const updateState2 = useMemo(() => {return highlightPassword(state2, '_.map_')}, [state2])useEffect(() => {setTimeout(() => {setState1('哈哈哈,中國萬歲,萬歲萬萬歲,中國加油!')setState2('哈哈哈,中國中國萬歲,萬歲萬萬歲,中國中國加油!愛你中國!')}, 2000)}, [])function highlightPassword(str0: any, key_prefix?: string) {const pattern = new RegExp(`\\B(?=((${password})+)+(?!(${password})))`, 'g')return str0.replace(pattern, '||||').split('||||').map((item, index) => {const idx = item.indexOf(password)return <span key={key_prefix + index}>{idx >= 0? <><span style={{ color: 'red' }}>{item.substring(0, password.length)}</span>{item.substring(password.length, item.length)}</>: item}</span>});}return (<div><p>dangerouslySetInnerHTML方式:</p><div dangerouslySetInnerHTML={{ __html: updateState1 }}></div><p>map遍歷children元素:</p>{_.map(updateState2, (child) => {return child})}<p>ReactDOM.render方法:</p><div className="my-highlight-test"></div></div>)
}export default Test

顯示效果：

初始化頁面時：

2s后（模擬異步請求數(shù)據(jù)）顯示：