- 小程序
使用自定义组件开发小程序中搜索文字高亮显示，可以按照以下步骤进行：
1. 创建一个自定义组件，用于包裹需要高亮显示的文本。在这个组件中，我们需要获取传入的数据，并将需要高亮的文字用特殊标签包裹起来，例如使用 标签。
{{ highlightedText }}2. 在自定义组件的 JS 文件中，我们需要监听 input 事件，并实时更新需要高亮的文字。这里我们可以利用字符串的 replace 方法来将需要高亮的文字用特殊标签包裹起来。
// components/HighlightedText/index.js
Component({
properties: {
text: {
type: String,
value: ''
},
keyword: {
type: String,
value: ''
}
},
data: {
highlightedText: ''
},
onLoad: function () {
this.setData({
highlightedText: this.data.text.replace(new RegExp(this.data.keyword, 'g'), '$&')
})
},
onInput: function (e) {
this.setData({
highlightedText: this.data.text.replace(new RegExp(this.data.keyword, 'g'), '$&')
})
}
})3. 在页面中使用自定义组件，传入需要高亮的文本和关键词即可。这里我们可以利用 bind 方法将关键词传入自定义组件。
4. 在页面的 JS 文件中，我们需要定义 inputChange 方法来监听输入框的变化，并实时更新关键词。这里我们可以利用字符串的 replace 方法来将输入框中的关键词提取出来。
// pages/index/index.js
Page({
data: {
keyword: ''
},
inputChange: function (e) {
this.setData({ keyword: e.detail.value })
}
})
