问题

Text部分字体变色，在应用中处理是很常见的操作。 RichText富文本组件，解析并显示HTML格式文本，通HTML实现，但是这个不太好用，在跟其他组件一起使用时自适应宽高的时候很难处理，要么就给固定宽高还可以。

解决方式

目前我的处理方式是：Text要显示的string做切割，然后用ForEach在Text中加Span组件，在Span组件中对文字做相应的特殊处理，这样可保证Text属性的延续，又可以处理各种特殊情况，就是拆分、计算等比较麻烦。

示例，高亮显示代码如下

export class StringUtils {
  public static readonly REGEX_B_S = "<B>"
  public static readonly REGEX_B_E = "</B>"
 
  /**
   * 获取高亮字符串列表
   * @param str 原始字符串
   */
  public static getHlList(str ?: string, regex ?: string): HlContent[] {
    if (str == undefined) {
      return []
    }
 
    let list: HlContent[] = []
    if (regex == undefined || !str.includes(regex)) {
      let content = new HlContent()
      content.content = str
      list.push(content)
      return list
    }
 
    if (StringUtils.REGEX_B_S == regex) {
      let splitStr: string[] = str.split(regex)
      for (let i = 0; i < splitStr.length; i++) {
        let temp = StringUtils.getHlList(splitStr[i], StringUtils.REGEX_B_E)
        if (temp != null && temp.length > 0) {
          list = list.concat(temp)
        }
      }
    }
    if (StringUtils.REGEX_B_E == regex) {
      let content1 = new HlContent()
      content1.isHl = true
      content1.content = str.substring(0, str.indexOf(regex))
      list.push(content1);
 
      let startIndex = str.indexOf(regex) + StringUtils.REGEX_B_E.length
      let endIndex = str.length
      if (startIndex < endIndex) {
        let content2 = new HlContent()
        content2.content = str.substring(startIndex, endIndex)
        list.push(content2);
      }
    }
 
    return list
  }
}
 
export class HlContent {
  content: string = ""
  isHl: boolean = false
}
 
import { HlContent, StringUtils } from './StringUtils';
@Entry
@Component
struct Index {
  @State text : string = '测试一下<B>高亮</B>其他位置再来一个<B>高亮</B>'
  build() {
    Column(){
      Text(){
        ForEach(StringUtils.getHlList(this.text, StringUtils.REGEX_B_S), (item: HlContent) => {
          if (item != null && item.content != null && item.content.length > 0) {
            if (item.isHl) {
              Span(item.content).fontColor("#ffff4500")
            } else {
              Span(item.content).fontColor("#ff000000")
            }
          }
        })
      }.fontSize(18).textOverflow({ overflow: TextOverflow.Ellipsis })
      .maxLines(1).fontWeight(FontWeight.Bold).margin({top:8})
    }
  }
}