基于Lit Element的JS项目replace替换HTML标签异常求助

问题描述 #

在Lit Element项目中尝试用replace方法往文本里插入HTML标签时，出现两种异常情况：要么显示[object Object]（或类似异常占位），要么HTML标签被转义成纯文本显示。

基础文本值 #

main-text = abc dcf [0] xyz
bold-text = 123 

现有渲染代码 #

render() { return html`
 <section >
  <div class="blablaclass" @click = ${() => this.clickfnc()} >
      <div class="blablaclass1">
        ${html`<span> ${this.t('main-text').replace('[0]', this.renderCardText )} </span>`}
      </div>
      <div> 
        <img class="blablaclass2" src="./resources/right-arrow.svg"/>
      </div>
  </div>
</section>`; 

}
get renderCardText(){
    return html`<strong>this.t('bold-text')</strong>`;
}

当前异常输出 #

output: acv dcf [] xyz 
// 若renderCardText直接返回字符串而非html模板，输出为：
acv dcf <strong>123</strong> xyz 

问题根源 #

1. 字符串replace不支持TemplateResult对象：renderCardText返回的是Lit的TemplateResult对象（通过html模板字面量生成），而String.replace只能处理字符串，把对象传入会被强制转成[object Object]（你这里显示[]是异常表现，但本质是对象无法被正确替换）。
2. 直接返回字符串会被Lit转义：如果renderCardText返回纯HTML字符串，Lit为了安全会自动转义HTML标签，导致标签以文本形式显示。
3. 渲染代码的小错误：renderCardText里的this.t('bold-text')是写死在字符串中的，没有通过模板插值调用，无法正确获取bold-text的值。

解决方案 #

不要用字符串replace混合模板对象，而是将目标文本拆分为占位符前后的片段，再和HTML模板片段一起组合进Lit模板中：

render() {
  // 拆分主文本为占位符前后两部分
  const mainText = this.t('main-text');
  const [prefix, suffix] = mainText.split('[0]');
  
  return html`
 <section >
  <div class="blablaclass" @click=${() => this.clickfnc()}>
      <div class="blablaclass1">
        <span>${prefix}${this.renderCardText}${suffix}</span>
      </div>
      <div> 
        <img class="blablaclass2" src="./resources/right-arrow.svg"/>
      </div>
  </div>
</section>`;
}

get renderCardText(){
    // 修正插值，正确获取bold-text的值
    return html`<strong>${this.t('bold-text')}</strong>`;
}

原理说明 #

Lit的html模板系统会识别并正确处理字符串和TemplateResult对象的组合：拆分后的字符串片段会直接渲染，renderCardText返回的TemplateResult会被解析为对应的HTML标签，既不会被转义，也不会显示对象的字符串形式。

内容的提问来源于stack exchange，提问作者errorau