如何隐藏HTML标签内的字符？含&的WooZone-free-shipping类span标签求助

别发愁，我帮你捋捋之前方法失效的可能原因，再给你几个切实可行的解决方案：

先排查之前方法失效的常见坑 #

• jQuery代码执行时机不对：要是你的代码写在<head>里，DOM还没加载完就跑起来了，自然找不到目标元素；
• CSS优先级不够：页面里说不定有更具体的选择器（比如div.product-card span.WooZone-free-shipping）把你的样式覆盖了；
• &字符是HTML实体：实际代码里它是&，不是纯文本的&，导致替换或选择逻辑失效；
• 元素是动态加载的：比如通过AJAX、插件异步渲染的，DOM就绪后执行的代码根本抓不到它。

解决方案1：靠谱的jQuery替换法（推荐） #

确保代码在DOM完全加载后执行，同时处理HTML实体的情况：

// 等DOM全部加载完成再执行
$(document).ready(function() {
  // 遍历所有目标span
  $('.WooZone-free-shipping').each(function() {
    // 用html()获取内容，同时替换纯文本&和实体&
    const updatedContent = $(this).html().replace(/&|&/g, '');
    $(this).html(updatedContent);
  });
});

如果元素是动态加载的（比如商品列表异步加载），用MutationObserver监听元素变化：

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 检查新增节点里有没有目标span
    $(mutation.addedNodes).find('.WooZone-free-shipping').each(function() {
      $(this).html($(this).html().replace(/&|&/g, ''));
    });
  });
});

// 监听body下所有子元素的变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

解决方案2：纯CSS隐藏法（适合不能用JS的场景） #

如果不想修改文本内容，只是视觉上隐藏&字符，可以用这个技巧（注意：依赖背景色，需要大概知道&的位置）：

.WooZone-free-shipping {
  position: relative;
}

/* 假设&在文本开头，调整left和width匹配&的位置和宽度；在结尾就改right */
.WooZone-free-shipping::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background-color: #ffffff; /* 和span所在区域的背景色保持一致 */
}

要是你其实想隐藏整个span（可能表述时没说清楚），用高优先级CSS彻底隐藏：

span.WooZone-free-shipping {
  display: none !important;
}

快速验证小技巧 #

1. 打开浏览器开发者工具，找到目标span，确认class拼写完全正确；
2. 检查HTML里的&是纯文本还是&实体；
3. 在Console里执行$('.WooZone-free-shipping')，看是否能正常找到元素。

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