react 搜索实现高亮

为了增加用户体验,都会提供一个快速搜索的功能,以便用户快速定位,但是如果进行模糊匹配的话,希望输入的关键字在搜出来的数据里面进行高亮展示,提高用户体验

技术点


1. font 标签

// 利用font标签可以规定文本字体、大小和颜色

测试

2. dangerouslySetInnerHTML (直接在React中设置 HTML)

react 官网文档提供方法,是 React 为浏览器 DOM 提供 innerHTML 的替换方案。
通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于跨站脚本(XSS)的攻击。
因此,你可以直接在 React 中设置 HTML,但当你想设置 dangerouslySetInnerHTML 时,需要向其传递包含 key 为 __html 的对象,以此来警示你

// 例如
const Test = () => {
 return 
}

实现核心代码

// 我们直接定义一个函数,替换关键字即可, 之后利用react的这个属性直接展示html字符串
    const textHightLight = (value: string, keyWord: string) => {
    	if (value.indexOf(keyWord) !== -1 && keyWord !== '') {
	  return value.replace(keyWord, `${keyWord}`)
	}
        return value
    }



可以根据自己的需求进行方法调整

正则:用正则去做单行匹配,主要核心逻辑如下:

var reg =new RegExp(keyword,"g"); //定义正则  keyword是关键词

title = title.replace(reg, `${keyword}`); //进行替换,并定义高亮的样式

交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解  群号:   856402057

2、公众号:公众号「进军全栈攻城狮」 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!

                         

 

你可能感兴趣的:(JavaScript,react,TypeScript,react.js,前端,reactjs)