How to get JavaScript output to display span style?-CodePudding

I have a translation feature that when clicked changes the paragraphs to a french version. Now The first word of every paragraph is wrapped in a span, the span has a css class that enlarges the word and colors it. When the button is clicked it switches the english P to the french P and I need the span style to also take effect to the first word of every french paragraph in the output. How do I do this?

 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;
}

CodePudding user response：

Okk So I guess, even before you are pressing the Button, the firstWord Class gets activated, i mean <span class="firstWord">Here</span> this here is 26px from first. But you need to increase the fontsize when the button is pressed.

function translate_fr(){}

Inside this function get the firstWord class by querySelector and then apply the Style for that specific action. Do try this approach and let me Know.

Happy Coding!

CodePudding user response：

There are many ways you could approach this problem, but the most straight forward, given your specific requirements, might be a simple search & replace:

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

The regex ^\w matches the first word, and the $& in the replacement string essentially wraps the matched text in your span tag.

So the search finds "Chez" and replaces it with "<span class="firstWord">Chez</span>"