Tengo una función de traducción que, cuando se hace clic, cambia los párrafos a una versión en francés. Ahora, la primera palabra de cada párrafo está envuelta en un lapso, el lapso tiene una clase css que amplía la palabra y la colorea. Cuando se hace clic en el botón, cambia la P inglesa a la P francesa y necesito que el estilo de intervalo también tenga efecto en la primera palabra de cada párrafo francés en la salida. ¿Cómo hago esto?
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; }Hay muchas maneras de abordar este problema, pero la más directa, dados sus requisitos específicos, podría ser una simple búsqueda y reemplazo:
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 La expresión regular ^\w+ coincide con la primera palabra, y $& en la cadena de reemplazo esencialmente envuelve el texto coincidente en su etiqueta de intervalo.
Entonces la búsqueda encuentra "Chez" y lo reemplaza con "<span class="firstWord">Chez</span>"
Intentando poner la primera palabra en francés en un lapso como la primera palabra en inglés.
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>Bien, supongo que, incluso antes de presionar el botón, la primera clase de palabra se activa, quiero decir <span class="firstWord">Here</span> esto aquí es 26px desde el principio. Pero necesita aumentar el tamaño de fuente cuando se presiona el botón.
function translate_fr(){}Dentro de esta función, obtenga la clase firstWord mediante querySelector y luego aplique el Estilo para esa acción específica.