如何用JavaScript处理特定类产品标题：拆分换行或删除-后内容

嘿，这个需求其实很好实现，咱们结合类名选择器和字符串处理逻辑就能搞定，我给你拆解成具体步骤，保证清晰好懂：

1. 先明确场景判断规则 #

首先得把「多数场景」和「部分场景」的区分规则落地，最直观的方式是用额外类名标识需要特殊处理的元素：

• 给需要删除“-”后所有内容的元素加个额外类，比如product-title--truncate（你可以换成自己习惯的命名）
• 剩下的仅带product-title类的元素，就执行「替换“-”为换行」的逻辑

当然你也可以换成其他判断规则，比如标题里包含特定关键词就截断，这个后面会给示例。

2. 编写核心JavaScript代码 #

// 第一步：获取所有目标类名的元素，确保只处理咱们要的标题
const productTitles = document.querySelectorAll('.product-title');

// 第二步：遍历每个标题元素，按需处理
productTitles.forEach(titleEl => {
  // 先拿到原始标题文本，去掉前后多余空格
  let originalText = titleEl.textContent.trim();
  
  // 判断是否属于需要截断的特殊场景
  if (titleEl.classList.contains('product-title--truncate')) {
    // 截断逻辑：按“-”分割字符串，取第一部分再去空格
    const truncatedText = originalText.split('-')[0].trim();
    titleEl.innerHTML = truncatedText;
  } else {
    // 常规逻辑：把所有“-”全局替换成换行标签<br>
    const wrappedText = originalText.replace(/-/g, '<br>');
    titleEl.innerHTML = wrappedText;
  }
});

3. 代码细节&灵活调整 #

• 类名精准控制：document.querySelectorAll('.product-title')确保只作用于带有这个类的元素，完全不会影响页面其他内容
• 场景判断灵活改：如果不想用额外类名，也可以根据标题内容判断，比如：

  // 示例：如果标题包含“限量款”就执行截断逻辑
  if (originalText.includes('限量款')) {
    // 截断代码...
  }
  

• 分隔符适配：如果你的标题用的是中文破折号“——”，记得把代码里的'-'换成'——'
• 换行生效注意：要用innerHTML而不是textContent，这样<br>标签才会被解析成换行，而不是显示成纯文本
• DOM加载时机：建议把代码放在DOMContentLoaded事件里，确保DOM渲染完成后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    // 上面的核心代码放这里
  });
  

4. 框架环境适配（可选） #

如果你是在React/Vue这类框架里开发，不需要用document.querySelectorAll，直接在组件内处理文本即可，核心逻辑完全一致：
比如React的示例：

function ProductTitle({ title, shouldTruncate }) {
  let processedTitle = title.trim();
  if (shouldTruncate) {
    processedTitle = processedTitle.split('-')[0].trim();
  } else {
    processedTitle = processedTitle.replace(/-/g, '<br>');
  }
  return <h3 className="product-title" dangerouslySetInnerHTML={{ __html: processedTitle }} />;
}

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