修复循环处理.price类标签时span被作为字符串插入的问题并优化代码

我网页里有多个class为price的p标签，结构如下：

<p class="price">Price: 45$</p>
<p class="price">Price: 32$</p>

我需要把标签内的文本拆成两个span标签，最终要变成这样：

<p class="price"><span class='h1'>Price:</span> <span class="h2">45$</span></p>

我写了下面的代码，但插入的span被当成纯文本显示，没有被解析成HTML标签：

let price = $(".price");
for (let i = 0; i < price.length; i++) {
    let priceTitle = price[i].innerText.split(":")[0];
    let priceToPay = price[i].innerText.split(":")[1];
    price[i].innerText = ''; // 清空price标签内容
    

    $(".price")[i].append("<span class='h1'>"+ priceTitle+"</span> <span class='h2'>"+ priceToPay +"</span>");

}

}

问题根源 #

你这里的问题出在：$(".price")[i]取到的是原生DOM节点，原生DOM的append()方法只会把传入的字符串当作纯文本插入，不会解析成HTML。而jQuery的append()方法才支持解析HTML字符串，但你没通过jQuery对象调用它。

优化后的代码 #

$(".price").each(function() {
    // 按冒号加空格拆分，保留标题和价格部分
    const [title, price] = $(this).text().split(/:(?= )/);
    // 直接设置元素的HTML内容
    $(this).html(`<span class='h1'>${title}:</span> <span class='h2'>${price}</span>`);
});

代码解析 #

• 用jQuery的.each()遍历所有.price元素，比手动写for循环更简洁，当前元素直接通过this获取，不用重复选择DOM
• 用正则/(?= )/拆分文本，确保冒号后面的空格留在价格部分，拆分后标题不带冒号，后续手动补上，避免格式混乱
• 用.html()方法直接替换元素内容，替代先清空再append的冗余操作，一步到位
• 使用ES6模板字符串拼接HTML，比传统字符串拼接更清晰，不容易出错

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