Establecer un color de fondo "amarillo" para palabras en un párrafo que tiene más de 8 caracteres.
Probé el siguiente código JavaScript pero muestra Cannot set properties of undefined (setting 'color')
const a=document.querySelector("p"); a.innerHTML= a.innerText.split(" ") .map( function(word){ if (word.length>8){ word.style.color="yellow"; } else{ return word; } } ) .join(" "); <h1>Heading</h1> <!-- this is the paragraph I used--> <p>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe? Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run. The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner. What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel. Run, Luke! Run!</p>Puede ser que podamos probar simplemente modificando el HTML interno con la devolución de elementos de intervalo.
<script> const a=document.querySelector("p"); const text = a.innerHTML.split(" ").map(function(word) { if(word.length > 8) { return `<span style="color: yellow;">${word}</span>` } else { return `<span>${word}</span>` } }).join(" ") a.innerHTML= text </script>const a=document.querySelector("p"); const words=a.innerHTML.split(" "); a.innerHTML=words.map((item)=>{ if(item.length>8) { return `<span style="background:yellow">${item}</span>` } else { return item; } }).join(" ");la función de filter es adecuada para su problema:
const element = document.querySelector("p"); const array = element.innerText.split(" "); const eightCharacter = array.filter(function(word) { return word.length > 8; }); const filteredWord = array.map(function(word) { if (eightCharacter.indexOf(word) != -1) { return '<span class="word">' + word + '</span>'; } else { return word; } }); element.innerHTML = filteredWord.join(' '); .word { color: yellow; } <h1>Heading</h1> <!-- this is the paragraph I used--> <p>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe? Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run. The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner. What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel. Run, Luke! Run!</p>Nota para: usar matrices para cambiar el color de ciertas palabras en un cuadro de entrada
Para esto, debe crear elementos de span porque necesita agregar color de fondo en cada palabra. Aquí hay un fragmento que inserta una etiqueta span si la palabra tiene más de 8 caracteres. Si las palabras tienen menos de 8, se insertará como texto.
const a=document.querySelector("p"); const b = document.createElement("span"); b.style.background = "yellow"; const words = a.innerHTML.split(" "); a.innerHTML = ""; for(let i=0; i<words.length;i++){ if(words[i].length>8){ b.innerText = words[i]; b.innerText += " "; a.appendChild(b); } else{ a.innerHTML += words[i]; a.innerHTML += " "; } } <h1>Heading</h1> <!-- this is the paragraph I used--> <p>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe? Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run. The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner. What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel. Run, Luke! Run!</p>