如何通过JS实现div中data-ans属性文本的局部加粗、斜体等格式设置

实现方案 #

你当前无法实现局部格式设置的核心原因是使用了textContent赋值，该属性会将所有内容当做纯文本处理，无法解析HTML格式标签，可按照以下两种方案实现需求：

方案1：直接嵌入HTML标签（适合内容完全可控的场景） #

你可以直接在data-ans属性中写入需要的格式标签，再将赋值方式从textContent改为innerHTML即可。

修改后的HTML示例：

<div class="portfolio-list">
  <div class="portfolio-button" id="a" data-id="b" data-ans="Hello <strong>!</strong>">
    <p class="portfolio-name">A</p>
  </div>
  <div class="portfolio-button" id="c" data-id="d" data-ans="Bonjour <em>!</em>">
    <p class="portfolio-name">B</p>
  </div>
  <!-- 其余按钮同理调整data-ans内容即可 -->
</div>
<div class="portfolio-selection-display" id="portfolioDescription"></div>

修改后的JS函数：

function setupPortfolioDescription() {
  const portfolioDescription = document.getElementById("portfolioDescription");
  const selectedPortfolio = document.getElementById(selectedPlan);
  // 把textContent换成innerHTML即可解析HTML标签
  portfolioDescription.innerHTML = selectedPortfolio.dataset.ans;
}

方案2：自定义标记替换（适合有XSS风险防护需求的场景） #

如果你不想直接在data-属性中写HTML标签，也可以自定义简单的格式标记（比如和Markdown语法一致的*表示斜体、**表示加粗），在JS中替换成对应标签后再赋值，避免不可控内容的注入风险。

修改后的HTML示例：

<div class="portfolio-list">
  <div class="portfolio-button" id="a" data-id="b" data-ans="Hello **!**">
    <p class="portfolio-name">A</p>
  </div>
  <div class="portfolio-button" id="c" data-id="d" data-ans="Bonjour *!*">
    <p class="portfolio-name">B</p>
  </div>
</div>

修改后的JS函数：

function setupPortfolioDescription() {
  const portfolioDescription = document.getElementById("portfolioDescription");
  const selectedPortfolio = document.getElementById(selectedPlan);
  let ansContent = selectedPortfolio.dataset.ans;
  // 替换自定义标记为HTML标签
  ansContent = ansContent
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // 匹配**xx**替换为加粗
    .replace(/\*(.*?)\*/g, '<em>$1</em>'); // 匹配*xx*替换为斜体
  portfolioDescription.innerHTML = ansContent;
}

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