Text匹配文字高亮显示

@Entry 
@Component 
struct Page240108114409062 { 
  @State searchValue: string = ''; 
  @State dataArr: string[] = [ 
    "第一段数据", 
    "第二段数据", 
    "第三段数据", 
    "第四段数据", 
    "第五段数据", 
    "第六段数据", 
    "第七段数据", 
    "第八段数据", 
    "第九段数据", 
    "第十段数据", 
  ] 
  @State showArr: string[] = [] 
 
  build() { 
    Row() { 
      Column() { 
        Search({ value: $$this.searchValue, placeholder: 'Type to search...' }) 
          .searchButton('SEARCH') 
          .width('90%') 
          .height(40) 
          .backgroundColor('#F5F5F5') 
          .placeholderColor(Color.Grey) 
          .placeholderFont({ size: 14, weight: 400 }) 
          .textFont({ size: 14, weight: 400 }) 
          .margin(20) 
          .onChange(() => { 
            this.showArr = this.dataArr.filter((item: string) => { 
              return this.searchValue && item.indexOf(this.searchValue) != -1 
            }) 
            console.log(JSON.stringify(this.showArr)) 
          }) 
        List() { 
          ForEach(this.showArr, (item: string) => { 
            ListItem() { 
              Row() { 
                // RichText(item) 
                Text() { 
                  Span(this.searchValue).fontColor(Color.Red) 
                  Span(item.replace(this.searchValue, "")) 
                } 
              }.width("100%").height(40).justifyContent(FlexAlign.Center) 
            } 
          }) 
        } 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.