HarmonyOS鸿蒙Next搜索结果中针对提示词数组中的关键词进行高亮显示问题

HarmonyOS鸿蒙Next搜索结果中针对提示词数组中的关键词进行高亮显示问题对于提示词数组[“你”,“好”,“1998”]，针对四种不同的搜索结果进行提示词高亮显示，

搜索结果为"你好，请回答1998"，其中你，好，1998字体颜色均为红色，其他为黑色；
搜索结果为"你是好人"，其中你，好字体颜色均为红色，其他为黑色；
搜索结果为"我是你的好好先生"，其中你，好，好字体颜色均为红色，其他为黑色；
搜索结果为"1998456"，其中1998字体颜色为红色，456为黑色。

phonegap100 1楼•10 天前

搜索结果字符串拆分为数组

参数

input

返回值

function splitString(input: string): string[] {
  const regex = /[\u4e00-\u9fa5]|\d+/g;
  const matches = input.match(regex);
  let regNumber = new RegExp('[0-9]+');
  matches?.forEach((value: string, index: number) => {
    if (regNumber.test(value)) {
      if (value.indexOf('1998') === 0) {
        matches.splice(index, 1, '1998')
        matches.splice(index + 1, 1, value.substring(value.indexOf('1998') + 4, value.length))
      } else {
        matches.splice(index, 1, value.substring(0, value.indexOf('1998')))
        matches.splice(index + 1, 1, '1998')
        matches.splice(index + 2, 1, value.substring(value.indexOf('1998') + 4, value.length))
      }
    }
  });
  console.log('matches', matches)
  if (!matches) {
    return [];
  }
  return matches
}

function build() {
  Column() {
    Text() {
      ForEach(this.splitString(this.bookName), (itemStr: string) => {
        Span(itemStr)
          .attributeModifier(new HighlightModifier(itemStr, this.tokenWord, 13))
          .fontWeight(FontWeight.Medium)
      })
    }.justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}

/**
 * 搜索结果关键词高亮处理
 */
export class HighlightModifier implements AttributeModifier<SpanAttribute> {
  textItem: string = ''
  cueWords: string[] = []
  fontSize: number = 12

  constructor(textItem: string, cueWords: string[], fontSize: number) {
    this.textItem = textItem
    this.cueWords = cueWords
    this.fontSize = fontSize
  }

  applyNormalAttribute(instance: SpanAttribute): void {
    instance.fontColor(this.cueWords.includes(this.textItem) ? $r('app.color.migu_color_gb_red'): $r('app.color.migu_color_text_black'))
    .fontSize(this.fontSize)
  }
}

更多关于HarmonyOS鸿蒙Next搜索结果中针对提示词数组中的关键词进行高亮显示问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•10 天前

在HarmonyOS鸿蒙Next中，针对搜索结果中提示词数组中的关键词进行高亮显示，可以通过使用Text组件的textSpan属性实现。首先，将搜索结果的文本和关键词传入，然后通过TextSpan对关键词进行高亮处理。具体步骤如下：

定义搜索结果的文本和关键词数组。
使用TextSpan对文本进行分割，匹配关键词并将其高亮显示。
将处理后的TextSpan数组赋值给Text组件的textSpan属性。

示例代码：

Text({
  textSpan: buildHighlightedText("这是一个搜索结果的示例文本", ["搜索", "结果"])
})

function buildHighlightedText(text, keywords) {
  let spans = [];
  let lastIndex = 0;
  keywords.forEach(keyword => {
    let index = text.indexOf(keyword, lastIndex);
    if (index !== -1) {
      if (index > lastIndex) {
        spans.push(TextSpan({ content: text.substring(lastIndex, index) }));
      }
      spans.push(TextSpan({ content: keyword, style: { color: 'red' } }));
      lastIndex = index + keyword.length;
    }
  });
  if (lastIndex < text.length) {
    spans.push(TextSpan({ content: text.substring(lastIndex) }));
  }
  return spans;
}

该代码将搜索文本中的关键词“搜索”和“结果”高亮显示为红色。

yuanlaile 3楼•10 天前

在HarmonyOS鸿蒙Next中实现搜索结果关键词高亮显示，可通过以下步骤：

获取关键词数组：从用户输入或搜索逻辑中提取关键词。
遍历搜索结果：对每个结果项进行关键词匹配。
高亮处理：使用Text组件的Span功能，将匹配到的关键词部分设置为高亮样式（如改变字体颜色、加粗等）。
渲染结果：将处理后的文本渲染到UI中。

示例代码：

const highlightKeywords = (text, keywords) => {
  keywords.forEach(keyword => {
    const regex = new RegExp(`(${keyword})`, 'gi');
    text = text.replace(regex, '<span style="color: red;">$1</span>');
  });
  return text;
};

此方法适用于简单的搜索高亮场景，复杂场景可结合正则表达式或第三方库优化。