搜索结果会将搜索框输入的内容高光效果

最新推荐文章于 2021-03-31 14:08:51 发布

Darryl、

最新推荐文章于 2021-03-31 14:08:51 发布

阅读量198

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_43805971/article/details/107665259

版权

msg是搜索结果的内容；highLightStr是搜索框输入的内容。

		highLight(item, highLight) {
		   return this.highLightTableMsg(item, highLight)
		},
		highLightTableMsg(msg, highLightStr) {
			if (msg == null) {
				msg = ''
			}
			if (highLightStr == null) {
				highLightStr = ''
			}
			if (msg instanceof Object) {
				msg = JSON.stringify(msg)
			}
			if (highLightStr instanceof Object) {
				highLightStr = JSON.stringify(highLightStr)
			}
			if (!(msg instanceof String)) {
				msg = msg.toString()
			}
			if (!(highLightStr instanceof String)) {
				highLightStr = highLightStr.toString()
			}
			var htmlStr = ''
			if (highLightStr.length > 0) {
				if (msg.indexOf(highLightStr) !== -1) {
					assemblyStr(msg, highLightStr)
				} else {
					htmlStr = '<span>' + msg + '</span>'
				}
			} else {
				htmlStr = '<span>' + msg + '</span>'
			}
			function assemblyStr(msgAssembly, highLightAssembly) {
				if (msgAssembly.indexOf(highLightAssembly) !== -1) {
					var length = highLightAssembly.length
					// alert(length)
					var start = msgAssembly.indexOf(highLightAssembly)
					htmlStr = htmlStr + '<span>' + msgAssembly.substring(0, start) + '</span>' + '<span style="background-color:#ffe72d;">' + highLightAssembly + '</span>'
					msgAssembly = msgAssembly.substring(start + length, msgAssembly.length)
					assemblyStr(msgAssembly, highLightAssembly)
				} else {
					htmlStr = htmlStr + '<span>' + msgAssembly + '</span>'
				}
			}
			return htmlStr;
		},