在FreeTextMarker中如何绑定HTML格式的字符串？

这里提供不同场景下的可用实现方式，均可以保证最终输出的HTML同时包含普通字符串数据，且HTML片段按设计正常渲染：

原生JavaScript无依赖实现 #

用ES6模板字面量拼接内容，插入页面时使用innerHTML解析即可：

// 定义普通字符串数据
const pageTitle = "活动公告";
const noticeTime = "2024年6月1日";
// 定义需要绑定的HTML片段
const highlightContent = `<span class="highlight">本次活动所有商品8折起，限量1000份</span>`;

// 拼接生成完整HTML结构
const finalHtml = `
<div class="notice-card">
  <h2>${pageTitle}</h2>
  <p class="notice-time">发布时间：${noticeTime}</p>
  <div class="notice-content">
    ${highlightContent}
    <p>活动最终解释权归官方所有</p>
  </div>
</div>
`;

// 插入到页面指定节点，innerHTML会自动解析HTML标签
document.querySelector("#root").innerHTML = finalHtml;

注意：如果HTML片段来自不可信的用户输入，需要提前过滤<script>、onclick等恶意内容，避免XSS安全风险。

主流框架场景实现 #

Vue 2/3 #

使用内置的v-html指令绑定HTML片段即可，普通字符串直接用双大括号插值：

<template>
  <div class="notice-card">
    <h2>{{ pageTitle }}</h2>
    <p class="notice-time">发布时间：{{ noticeTime }}</p>
    <div class="notice-content">
      <div v-html="highlightContent"></div>
      <p>活动最终解释权归官方所有</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pageTitle: "活动公告",
      noticeTime: "2024年6月1日",
      highlightContent: '<span class="highlight">本次活动所有商品8折起，限量1000份</span>'
    }
  }
}
</script>

React #

使用dangerouslySetInnerHTML属性绑定HTML片段：

function NoticeCard() {
  const pageTitle = "活动公告";
  const noticeTime = "2024年6月1日";
  const highlightContent = '<span class="highlight">本次活动所有商品8折起，限量1000份</span>';

  return (
    <div className="notice-card">
      <h2>{pageTitle}</h2>
      <p className="notice-time">发布时间：{noticeTime}</p>
      <div className="notice-content">
        <div dangerouslySetInnerHTML={{__html: highlightContent}} />
        <p>活动最终解释权归官方所有</p>
      </div>
    </div>
  )
}

常见问题排查 #

如果HTML片段没有正常渲染，优先检查两个点：

• 是否错误使用了innerText/textContent插入内容，这两个API只会把内容当做纯文本处理，不会解析HTML标签
• HTML片段本身是否存在标签未闭合、语法错误的问题

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