如何通过JavaScript全局替换Shopware6商品标题中的+特殊字符

基础版（覆盖页面加载完成后已存在的元素） #

核心逻辑：

• 用带全局匹配修饰符的正则/\+/g替换所有+符号，解决原代码只能替换第一个匹配项的问题
• 批量匹配你提到的4个场景对应的所有元素，无需逐个处理
  代码如下：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 所有需要替换的元素选择器
  const targetSelectors = [
    '.search-suggest-product-name',
    '.product-name',
    '.product-detail-description-title'
  ]
  
  targetSelectors.forEach(selector => {
    // 找到当前选择器匹配的所有元素
    const elements = document.querySelectorAll(selector)
    elements.forEach(el => {
      // 全局替换所有+号
      el.innerText = el.innerText.replace(/\+/g, '')
    })
  })
})

增强版（覆盖异步加载的动态内容） #

Shopware6默认的搜索建议、商品列表翻页多为异步加载，用下面的版本可以自动监听页面新增的元素并处理：

// 替换逻辑封装成函数
function replaceAllPlusInTitles() {
  const targetSelectors = [
    '.search-suggest-product-name',
    '.product-name',
    '.product-detail-description-title'
  ]
  
  targetSelectors.forEach(selector => {
    const elements = document.querySelectorAll(selector)
    elements.forEach(el => {
      // 加标记避免重复处理已处理过的元素，优化性能
      if (!el.dataset.plusProcessed) {
        el.innerText = el.innerText.replace(/\+/g, '')
        el.dataset.plusProcessed = '1'
      }
    })
  })
}

// 页面加载完成先执行一次
document.addEventListener('DOMContentLoaded', replaceAllPlusInTitles)

// 监听页面DOM变化，处理动态新增的元素
const observer = new MutationObserver(replaceAllPlusInTitles)
observer.observe(document.body, {
  childList: true,
  subtree: true
})

使用方式 #

把代码添加到Shopware6后台的自定义脚本注入区域，或者放到当前使用主题的自定义JS文件中，清空缓存后即可生效。

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