react專案中實現搜尋關鍵字呈現高亮狀態（一）

2022-07-10 09:48:07 字數 1317 閱讀 7673

最近有個需求，在乙個react專案中，實現搜尋關鍵字呈現高亮狀態。這個在普通的html檔案中還好操作些，在react專案中有點懵逼了，因為react專案中很少操作dom，有點無從下手。但最後還是實現了效果，如下：

首先來看看如何在react中操作dom,廣大網友給出兩種方案：

一：使用選擇器：

1、引入react-dom


import reactdom from 'react-dom'


2、給react節點設定id或類名等標識


'tip'>span>


3、定義變數儲存dom元素


var span = document.getelementbyid('tip')


4、通過reactdom的finddomnode()方法修改dom的屬性


reactdom.finddomnode(span).style.color = 'red'
二：使用ref屬性

1、給指定標籤設定ref屬性


ref='tip'>


2、通過this.refs.ref屬性值來修改標籤的屬性


this.refs.tip.style.color = "red"
我用第二種方案來操作的：

import react from 'react';


import  from 'antd';


const  = input;


// 高亮測試


class highlight extends react.component ;


}  findhighlight = (keyword)=>;


searchdo=(content,keyword)=>`,"gmi");


// eslint-disable-next-line no-param-reassign


content = content.replace(re,``);


}return content;


};render()  = this.state;


return (


this.findhighlight(value)}


style=}


/>


);}}


export default highlight;

然後就實現了上面的效果，但是這只是最初步的，如果需要完善功能還需要自己進一步改造。
				
關鍵字搜尋
關鍵字搜尋 function sercah waitmsg 已找到對應的 g keys count 處關鍵字！1 相同關鍵字查詢時返回 reading children reading box m p css span keys removeattr style removeattr id g ke...

				
elementUI實現關鍵字搜尋  只是搜尋
有過迷茫的階段獨自走在回家的街上，當我發現路還離我很遠現在依然是像當初那麼渴望 elementui實現關鍵字搜尋 運用的elementui選擇器中的遠端搜尋功能 還沒有封裝，接下來會封裝，封裝一點點學，不著急 結構 data 登記門店 prop name class el btn from sele...

				
ntext搜尋關鍵字
選擇自 zjcxc 的 blog ntext搜尋 按 tb 表中的 keyword 在 ta 中查詢 content 列出每個 keyword 在 content 中的具體位置 鄒建 2004.07 測試資料 create table ta id int identity 1,1 content n...