Ext JS中如何将HTML字符串设置为Textfield的fieldLabel并正确渲染

核心原因 #

• 你传入的原始字符串是双层HTML编码的内容，单次调用解码方法只能解开一层编码，无法得到可直接渲染的合法HTML标签
• Sencha 框架中TextField组件的fieldLabel默认会对内容做转义处理，将HTML标签转为纯文本展示，避免XSS安全风险

解决步骤 #

1. 对双层编码的字符串执行两次解码操作，得到最终的HTML片段
2. 为TextField组件添加labelAsHtml: true配置项，开启label的HTML渲染能力，框架就不会再对label内容做转义处理

代码示例 #

// 原HTML解码方法
function decodeHtml(html) {
  var txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

// 处理原始编码字符串
const encodedLabel = '<p><strong><span style="background-color: rgb(210, 213, 216);">Test</span></strong></p>';
// 两次解码得到最终HTML
const finalLabel = decodeHtml(decodeHtml(encodedLabel));

// 表单组件配置
Ext.create('Ext.form.Panel', {
  renderTo: Ext.getBody(),
  items: [{
    xtype: 'textfield',
    fieldLabel: finalLabel,
    labelAsHtml: true, // 关键配置，开启HTML渲染
    name: 'testField'
  }]
});

注意事项 #

如果fieldLabel的内容包含用户可输入的自定义内容，开启labelAsHtml前请做好HTML内容安全过滤，避免出现XSS注入漏洞。

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