时间戳

首页 > 解决方案 > 如何让 JavaScript 输出显示跨度样式？

javascript - 如何让 JavaScript 输出显示跨度样式？

问题描述

我有一个翻译功能，点击后可以将段落更改为法语版本。现在每个段落的第一个单词都包裹在一个 span 中，该 span 有一个 css 类，可以放大单词并为其着色。单击按钮时，它将英语 P 切换为法语 P，我需要 span 样式也对输出中每个法语段落的第一个单词生效。我该怎么做呢？

function translate_fr(){
  document.getElementById("intro").innerHTML = "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";     
}

<p id="intro">
    <span class="firstWord">Here</span> at Lion Kuts we are a cat only
      establishment that offers a full range of services 
      from complete grooming, bathing to boarding. You and 
      your pet will be thrilled to know that only professional, 
      natural and biodegradeable products are used, any 
      sensitivities or allergies will not be a problem.
</p>


.firstWord {
    font-family: Alegreya Sans SC;
    line-height: 1;
    font-size: 26px;
    font-weight: bold;
    color: #872741;
}

标签： javascripthtmlcss

解决方案

有很多方法可以解决这个问题，但根据您的具体要求，最直接的方法可能是简单的搜索和替换：

const translatedText = "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";

document.getElementById("intro").innerHTML = translatedText.replace(/^\w+/, '<span class="firstWord">$&</span>');

// Result: <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

正则表达式^\w+匹配第一个单词，替换字符串中的$&the 基本上将匹配的文本包装在您的 span 标签中。

所以搜索会找到"Chez"并将其替换为"<span class="firstWord">Chez</span>"

推荐阅读