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