如何用原生JavaScript为字符串指定部分添加HTML标签（价格格式转换需求）

问题描述 #

请注意，该问题此前已有相关解答，但现有方案基于jQuery实现，我需要使用原生JavaScript完成相同功能。

我的具体问题如下：页面中展示的价格字符串对应HTML为<span>60.00</span>，我希望将其转换为<span>60,<sup>00</sup></span>的格式。

我尝试编写的代码如下：

let value = "60.00";
value = value.replace(".", ",");
let values = value.split(',');
var tag = document.createElement("sup");
var text = document.createTextNode(values[1]);
text = tag.appendChild(text);
let text1 = JSON.stringify(text);
alert(values[0]+text1);

运行上述代码后输出结果为60{}，无法得到预期的60,⁰⁰效果，请问该如何正确实现需求？

解决方案 #

你代码出错的核心原因是：创建的<sup>是DOM节点对象，无法直接和普通字符串拼接使用，用JSON.stringify序列化DOM节点只会得到空对象{}，自然无法输出预期效果。

以下是两种可直接运行的原生JS实现方案：

方案1：innerHTML实现（简单直观，适合内容安全的场景）

// 选中页面上的价格span元素，可根据实际页面结构调整选择器
const priceSpan = document.querySelector('span');
// 拆分价格的整数和小数部分
const [integerPart, decimalPart] = priceSpan.textContent.split('.');
// 直接赋值innerHTML生成需要的结构
priceSpan.innerHTML = `${integerPart},<sup>${decimalPart}</sup>`;

方案2：纯DOM操作（无XSS风险，安全性更高）

const priceSpan = document.querySelector('span');
const [integerPart, decimalPart] = priceSpan.textContent.split('.');
// 清空原有内容
priceSpan.textContent = '';
// 插入整数部分和逗号
priceSpan.append(document.createTextNode(`${integerPart},`));
// 创建sup节点插入小数部分
const supNode = document.createElement('sup');
supNode.textContent = decimalPart;
priceSpan.append(supNode);

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