有品质的网站推广公司,软件开发工程师职责,沈阳网站建设syfzkj,wordpress crawling文章目录 一、前言二、实现三、最后 一、前言
使用搜索引擎时的搜索结果高亮#xff0c;搜索文本在查询出来的结果内高亮显示#xff0c;这种在全文检索应该很常见 二、实现
看了下百度检索的实现#xff0c;是给内容加上了em标签#xff0c;然后给em标签设置颜色#x… 文章目录 一、前言二、实现三、最后 一、前言
使用搜索引擎时的搜索结果高亮搜索文本在查询出来的结果内高亮显示这种在全文检索应该很常见 二、实现
看了下百度检索的实现是给内容加上了em标签然后给em标签设置颜色如下所示 在前端实现搜索并展示文字高亮的功能可以通过以下步骤进行 1、 获取搜索关键词首先你需要获取用户输入的搜索关键词。这可以通过表单输入、输入框或其他交互方式来实现。 2、 遍历文本内容将需要进行搜索的文本内容获取到并进行遍历。这可以是一个字符串、HTML 元素的文本内容或其他文本源。 3、 高亮匹配的关键词在遍历过程中对于每个文本片段判断是否包含搜索关键词。如果包含可以使用 HTML 标签或 CSS 类来添加样式从而实现高亮效果。例如可以使用 span 标签包裹匹配的关键词并为该标签添加自定义的 CSS 类。 4、 更新文本内容根据搜索结果进行高亮处理后将更新后的文本内容重新渲染到页面上以展示高亮效果。 下面是一个使用 JavaScript 实现搜索并展示文字高亮的简单示例
!DOCTYPE html
htmlheadstyle.highlight { background-color: yellow; font-weight: bold; }/style/headbodyinput typetext idsearchInput placeholderSearchp idcontentLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac metusac risus lacinia malesuada. Curabitur eget mi euismod, tincidunt lacusnec, sodales lectus. Sed vitae mi at sem tristique varius. Nulla facilisi.Phasellus sed justo magna. Sed ullamcorper enim vitae lectus vehicula,sit amet mollis libero lacinia. Vestibulum ante ipsum primis in faucibusorci luctus et ultrices posuere cubilia Curae; Sed auctor, urna a facilisistristique, lacus sem lacinia ex, et efficitur mi eros sit amet metus./pscriptfunction highlightText(searchTerm) {const contentElement document.getElementById(content);const content contentElement.textContent;const regex new RegExp(searchTerm, gi);const highlightedContent content.replace(regex, match span classhighlight${match}/span);contentElement.innerHTML highlightedContent;}const searchInput document.getElementById(searchInput);searchInput.addEventListener(input, function() {const searchTerm this.value.trim();highlightText(searchTerm);});/script/body/html在上面的示例中我们通过监听搜索输入框的 input 事件来获取搜索关键词。然后我们使用正则表达式和 replace() 方法来替换匹配的关键词并使用 span 标签和 .highlight 类来添加高亮样式。最后我们将更新后的内容重新赋值给文本容器从而实现高亮展示效果。
需要注意的是上述示例仅仅是一个简单的实现如果需要更复杂的搜索功能可能需要使用更高级的搜索库或框架。此外对于大量文本内容的搜索可能需要考虑性能优化的问题。
三、最后
本人每篇文章都是一字一句码出来希望大佬们多提提意见。顺手来个三连击点赞收藏关注✨。创作不易给我打打气加加油☕
