如何让JavaScript输出的法语文本段落首字应用指定的span样式？

实现方案 #

你只需要在替换段落内容时，主动将法语文本的首词包裹上带firstWord类的span标签即可，有两种实现方式可选：

方案1：动态拆分文本（适合翻译内容可变的场景）

自动识别文本首词并添加样式，不需要手动修改文本内容：

function translate_fr(){
  // 定义完整法语文本
  const frContent = "Chez Coupe Lion, nous ne sommes qu'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème";
  // 拆分首词与剩余内容
  const contentSeg = frContent.split(' ');
  const firstWord = contentSeg.shift();
  const restContent = contentSeg.join(' ');
  // 拼接带样式的完整内容
  document.getElementById("intro").innerHTML = `<span class="firstWord">${firstWord}</span> ${restContent}`;
}

方案2：手动包裹首词（适合翻译内容固定的场景）

直接在静态文本里给首词套标签，代码更简洁性能更高：

function translate_fr(){
  document.getElementById("intro").innerHTML = '<span class="firstWord">Chez</span> Coupe Lion, nous ne sommes qu\'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l\'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème';
}

两种方案都可以直接复用你已经写好的.firstWord样式规则，不需要额外修改CSS。

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