前端实现-搜索关键字标红处理

1、实现效果

2、代码实现

searchNotes(data, value) {
						const searchTerms = value.split(' ');
						const aData = [];

						for (let i = 0; i < data.length; i++) {
							const item = data[i];
							let titleMatches = true;
							let gaishuMatches = true;

							for (const term of searchTerms) {
								if (!item.name.includes(term)) {
									titleMatches = false;
								}
								if (!item.gaishu.includes(term)) {
									gaishuMatches = false;
								}
							}

							if (titleMatches || gaishuMatches) {
								const searchData = {
									...item
								};
								for (const term of searchTerms) {
									const regExp = new RegExp(term, 'gi');
									if (titleMatches && searchData.name.match(regExp)) {
										searchData.name = searchData.name.replace(regExp,
											`<span style="color:red;">${term}</span>`);
									}
									if (gaishuMatches && searchData.gaishu.match(regExp)) {
										searchData.gaishu = searchData.gaishu.replace(regExp,
											`<span style="color:red;">${term}</span>`);
									}
								}
								aData.push(searchData);
							}
						}

						return aData;
					}

3、使用方式

searchlesson() {
						var that = this;
						$.ajax({
							type: 'post',
							url: "{:url('index/searchlesson')}",
							data: {
								userid: that.userId,
								key: that.searchValue
							},
							dataType: "json",
							success: function(data) {
								if (data) {
									that.searchData = data;
									if (that.searchData.length > 0) {
										var aNotes = that.searchNotes(that.searchData, that.searchValue);
										that.searchData = aNotes;
									}
								} else {
									alert("查询失败");
								}
							}
						});
					}