用黄色背景突出显示所有超过 8 个字符的单词。 如何在不使用 jQuery 的情况下仅使用 JavaScript 来解决这个问题？

Question

I have started learning JavaScript through practice exercises. I tried solving this question in the following way but it is not working.. Any leads would be appreciated.

 window.onload = function() { check = (word) => { if (word.length > 8) { word.style.color = "blue"; } else { word; } } func = () => { var str = document.querySelector("#Second").innerText; var newt = str.trim().split(' ').map(check).join(' '); document.querySelector("#Second").innerText = newt; } }

Answer 1

I think you problem lies in the check() function. You have analyzed the problem correctly, but you don't understand about DOM so you have done it wrong way.

First, the word you check is pure string (which is an array of char, so that you could check it with length property). Second, the .style.color is child object of Element DOM object only. String cannot do that.

Because of the problem, you have to convert the string you just check to Element DOM object. Depending on cases, there is many way to do so. I will assume that the output will be like this:

document.body.innerHTML += word

If that is the case, you can be at ease. Just simply wrap the word in this html code string. The rest you have solved it well.

(I know you use innerText, but I think innerHTML is much easier so I choose it. If you really need to use innerText, comment below and I will update the post)

Here is my code:

 window.onload = function() { const check = word => { if (word.length > 8) { return '<span class="hightlight">' + word + '</span>' } else { return word } } const sample = document.querySelector("#sample") sample.innerHTML = sample.innerText.trim().split(' ').map(check).join(' ') }

 #sample {}.hightlight { background: yellow }

 <p id='sample'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

My advice. Before doing anything, try to understand the variables' type you are dealing with.

Answer 2

 window.onload = function() { check = (word) => { if (word.length > 8) { word = '<span style="background:yellow;">' + word + '</span>'; } else { word; } return word; } var str = document.querySelector("#Second").innerText; var newt = str.trim().split(' ').map(check).join(' '); document.querySelector("#Second").innerHTML = newt; }

 <div id="Second">Short short thiswordislong short short thiswordislongtoo short</div>

Answer 3

Version with.|,|?detection

 const setup = () => { const p = document.querySelector('p'); wrapWordsWithLengthEight(p); } const check = (word) => { //Check if word include a.|,|? const hasCharacter = word.includes(".", word.length - 1) || word.includes(",", word.length - 1) || word.includes('?', word.length - 1); //Calculate real word length const wordLength = hasCharacter? (word.length -1): word.length; if(wordLength > 8) { const spanContent = hasCharacter? word.substring(0, word.length - 1): word; const endCharacter = hasCharacter? (word.substring(word.length - 1)): ''; word = `<mark>${spanContent}</mark>${endCharacter} `; } else word = `${word} `; return word; }; const wrapWordsWithLengthEight = (target) => { //Render HTML to target const text = (target.textContent).trim().split(' ').map(check).join(''); target.innerHTML = text; } window.addEventListener('load', setup);

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique enim quod quos, modi architecto, praesentium tenetur suscipit assumenda, sit neque odit, illum minima voluptates? Dolor non dolore accusamus quam maiores. </p>