0

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;
}
Improve this question
3
  • 2
    Hi, is there a reason that the French version can't also have the span included in the same way as the English version. i.e. document.getElementById("intro").innerHTML = "<span class="firstWod">Chez</span> Coupe Lion, nous ......"; Commented Oct 4, 2021 at 6:47
  • If that is a possibility but it does not seem to work for me not sure why. Commented Oct 4, 2021 at 15:06
  • Well, I can see that in the code I put in my comment I'd not only misspelled firstWord but had also used double quotes twice. Apologies. I've put a working version into an answer so you can try it. Commented Oct 4, 2021 at 15:22

3 Answers 3

Reset to default
1

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>"

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Trying with putting the first French word in a span like the first English word.

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 {
  font-family: Alegreya Sans SC;
  line-height: 1;
  font-size: 26px;
  font-weight: bold;
  color: #872741;
}
<button onclick="translate_fr();">Click me to translate</button>
<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>

Improve this answer

3 Comments

This was what I was looking for thank you, I know its possible to insert html elements into a string but honestly was getting mixed up with the quotations.
JDB still remembers Monica Answer really is more proficient, as it basically targets each paragraph and applies the class to each first word of every paragraph. HOWEVER I only need this to effect certain paragraphs so I will accept your answer! Thanks for the help!
I agree, as long as you are sure what a 'first word' is in the given language - I think you'd be safe with that for English to French as they are so similar.
-1

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.

Improve this answer

1 Comment

CSS is not applied by action. It is applied (in this case) by the presence of a class on an HTML element. The OP's code replaces the HTML element with text that does not have an HTML element with the appropriate class and therefore the CSS is not applied. In other words, there is no firstWord class to get by querySelector, and if there was, it would already have the CSS applied.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.