位置：文档库 > JavaScript > 微信小程序实现全局搜索代码高亮的示例

微信小程序实现全局搜索代码高亮的示例

PixelMyth 上传于 2022-01-05 18:20

《微信小程序实现全局搜索代码高亮的示例》

在微信小程序开发中，全局搜索功能是提升用户体验的重要环节。当用户输入关键词时，不仅需要快速定位到匹配内容，还需通过代码高亮直观展示搜索结果。本文将结合实际案例，详细讲解如何在小程序中实现全局搜索与代码高亮功能，涵盖数据过滤、关键词匹配、正则表达式应用及动态样式渲染等核心环节。

一、功能需求分析

全局搜索高亮功能需满足以下条件：

支持模糊匹配：用户输入部分关键词即可匹配相关内容
多字段搜索：可同时搜索标题、正文、标签等多个字段
高亮显示：匹配关键词需以不同颜色或背景色突出显示
性能优化：处理大量数据时需保证搜索响应速度

二、数据准备与结构

假设我们有一个文章列表数据结构如下：

// pages/data/articleList.js
const articleList = [
  {
    id: 1,
    title: '微信小程序开发指南',
    content: '本文详细介绍微信小程序的基础组件和API使用方法...',
    tags: ['前端', '小程序']
  },
  {
    id: 2,
    title: 'JavaScript高级编程',
    content: '深入探讨JavaScript的闭包、原型链等高级特性...',
    tags: ['JavaScript', '编程']
  }
]

module.exports = { articleList }

三、搜索功能实现

1. 创建搜索页面

在pages目录下新建search页面，配置app.json：

{
  "pages": [
    "pages/search/search"
  ],
  "window": {
    "navigationBarTitleText": "全局搜索"
  }
}

2. 实现搜索逻辑

在search.js中编写核心搜索函数：

// pages/search/search.js
const { articleList } = require('../../data/articleList')

Page({
  data: {
    searchText: '',
    filteredList: [],
    isLoading: false
  },

  // 输入框绑定事件
  onInputChange(e) {
    const value = e.detail.value.trim()
    this.setData({ searchText: value }, () => {
      if (value) {
        this.searchArticles(value)
      } else {
        this.setData({ filteredList: [] })
      }
    })
  },

  // 核心搜索方法
  searchArticles(keyword) {
    this.setData({ isLoading: true })
    
    // 使用正则表达式实现模糊匹配
    const regex = new RegExp(keyword, 'gi')
    const filtered = articleList.filter(item => {
      return (
        regex.test(item.title) || 
        regex.test(item.content) || 
        item.tags.some(tag => regex.test(tag))
      )
    }).map(item => {
      // 处理高亮文本
      const highlightText = (text) => {
        if (!regex.test(text)) return text
        return text.split(regex).map((part, i) => 
          regex.test(part) ? 
          `${part}` : 
          part
        ).join('')
      }

      return {
        ...item,
        title: highlightText(item.title),
        content: highlightText(item.content),
        tags: item.tags.map(tag => 
          regex.test(tag) ? 
          `${tag}` : 
          tag
        )
      }
    })

    setTimeout(() => {
      this.setData({ 
        filteredList: filtered,
        isLoading: false 
      })
    }, 300) // 简单防抖
  }
})

3. 页面渲染与样式

search.wxml实现搜索框和结果列表：



  
    
  

  搜索中...

  
    
      
        {{item.title}}
        {{item.content}}
        
          
            {{item}}
          
        
      
    
    
      未找到匹配内容

search.wxss样式文件：

/* pages/search/search.wxss */
.container {
  padding: 20rpx;
}

.search-box {
  margin-bottom: 30rpx;
}

.search-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 0 20rpx;
}

.highlight {
  color: #ff4d4f;
  font-weight: bold;
  background-color: #fff7e6;
  padding: 0 5rpx;
}

.article-item {
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background: #f9f9f9;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
}

.content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
}

.tag {
  font-size: 24rpx;
  margin-right: 15rpx;
  margin-bottom: 10rpx;
  background: #f0f0f0;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

四、关键技术点解析

1. 正则表达式应用

使用new RegExp(keyword, 'gi')创建不区分大小写的全局匹配正则表达式，其中：

g：全局匹配
i：忽略大小写

2. 富文本渲染

微信小程序通过wx:parse指令支持有限HTML标签解析，需在页面配置中启用：

// app.json
{
  "window": {
    "textStyleSafeArea": true
  },
  "richTextNodes": true
}

3. 性能优化策略

防抖处理：通过setTimeout延迟执行搜索，避免频繁触发
分页加载：大数据量时实现分页查询
WebWorker：复杂计算可考虑使用Worker线程

五、完整实现流程

创建搜索页面并配置路由
准备测试数据（可连接后端API）
实现输入框绑定与防抖逻辑
编写正则表达式匹配函数
处理文本高亮并生成HTML片段
使用wx:parse渲染富文本
添加加载状态和空结果提示

六、常见问题解决方案

1. HTML标签不渲染

问题原因：未正确配置wx:parse或使用了不支持的标签

解决方案：

// 确保页面json中配置
{
  "usingComponents": {},
  "richTextNodes": true
}

2. 搜索性能卡顿

优化措施：

对超过1000条的数据实现分页
使用WebWorker处理复杂匹配
添加搜索历史缓存

3. 特殊字符处理

正则表达式特殊字符需转义：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

// 使用示例
const safeKeyword = escapeRegExp(keyword)
const regex = new RegExp(safeKeyword, 'gi')

七、扩展功能建议

搜索历史记录：使用wx.setStorage保存用户搜索词
热门搜索推荐：基于用户行为统计
多语言支持：国际化搜索提示
语音搜索：集成微信语音识别API

八、完整代码示例

综合上述内容，完整search.js实现：

// pages/search/search.js
const { articleList } = require('../../data/articleList')

Page({
  data: {
    searchText: '',
    filteredList: [],
    isLoading: false
  },

  onLoad() {
    // 页面加载逻辑
  },

  onInputChange(e) {
    const value = e.detail.value.trim()
    this.setData({ searchText: value }, () => {
      if (value.length > 0) {
        this.debouncedSearch(value)
      } else {
        this.setData({ filteredList: [] })
      }
    })
  },

  // 防抖函数
  debouncedSearch: (function() {
    let timer
    return function(keyword) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        this.searchArticles(keyword)
      }, 300)
    }
  })(),

  escapeRegExp(string) {
    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  },

  highlightText(text, regex) {
    if (!regex.test(text)) return text
    return text.split(regex).map((part, i) => 
      regex.test(part) ? `${part}` : part
    ).join('')
  },

  searchArticles(keyword) {
    if (!keyword) return
    
    this.setData({ isLoading: true })
    const safeKeyword = this.escapeRegExp(keyword)
    const regex = new RegExp(safeKeyword, 'gi')
    
    const filtered = articleList.filter(item => {
      return (
        regex.test(item.title) || 
        regex.test(item.content) || 
        item.tags.some(tag => regex.test(tag))
      )
    }).map(item => {
      return {
        ...item,
        title: this.highlightText(item.title, regex),
        content: this.highlightText(item.content, regex),
        tags: item.tags.map(tag => 
          regex.test(tag) ? 
          `${tag}` : 
          tag
        )
      }
    })

    setTimeout(() => {
      this.setData({ 
        filteredList: filtered,
        isLoading: false 
      })
    }, 300)
  }
})

九、总结

本文通过完整案例演示了微信小程序中实现全局搜索与代码高亮的核心技术，包括正则表达式匹配、富文本渲染、性能优化等关键点。开发者可根据实际需求调整搜索字段、高亮样式和交互逻辑，构建符合业务场景的搜索功能。

关键词：微信小程序、全局搜索、代码高亮、正则表达式、富文本渲染、性能优化、防抖处理

简介：本文详细介绍微信小程序中实现全局搜索并高亮显示匹配关键词的技术方案，涵盖数据过滤、正则匹配、富文本渲染等核心环节，提供完整代码示例和性能优化策略。

《微信小程序实现全局搜索代码高亮的示例.doc》

将本文的Word文档下载到电脑，方便收藏和打印

推荐度：

点击下载文档

立即下载

JavaScript相关