用黄色背景突出显示所有长度超过8个字符的单词。如何只使用JavaScript而不使用jQuery来解决这个问题？

我已经开始通过练习学习JavaScript。我试着用下面的方法解决这个问题，但不起作用！。任何线索将不胜感激

window.onload=function（）{
检查=（单词）=>{
如果（字长>8）{
word.style.color=“蓝色”；
}否则{
单词
}
}
func=（）=>{
var str=document.querySelector（#Second”）.innerText；
var newt=str.trim（）.split（“”）.map（check）.join（“”）；
document.querySelector（“#Second”）.innerText=newt；
}
}

window.onload=function（）{
检查=（单词）=>{
如果（字长>8）{
单词=“”+单词+“”；
}否则{
单词
}
返回词；
}
var str=document.querySelector（#Second”）.innerText；
var newt=str.trim（）.split（“”）.map（check）.join（“”）；
document.querySelector（“#Second”）.innerHTML=newt；
}

---

Short Short this words long Short this words long too Short

我认为您的问题在于

check（）

函数。您已经正确地分析了问题，但是您不了解DOM，所以您的方法是错误的

首先，您检查的单词是纯字符串（这是一个字符数组，因此您可以使用

length

property检查它）。 其次，

.style.color

只是元素DOM对象的子对象。字符串不能这样做

由于这个问题，您必须将刚刚检查的字符串转换为元素DOM对象。根据具体情况，有很多方法可以做到这一点。我假设输出如下：

document.body.innerHTML += word

如果是这样，你可以放心。只需将

单词

包装在这个html代码字符串中即可。其余的问题你都解决得很好

（我知道你使用innerText，但我认为innerHTML更容易，所以我选择了它。如果你真的需要使用innerText，请在下面发表评论，我会更新帖子）

这是我的密码：

window.onload=function（）{
常量检查=单词=>{
如果（字长>8）{
返回“”+单词+“”
}否则{
回信
}
}
const sample=document.querySelector（“示例”）
sample.innerHTML=sample
.innerText
.trim（）
.拆分（“”）
.地图（勾选）
.加入（“”）
}

#示例{}
.hightlight{
背景：黄色
}

---

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面发布软件的发布而流行，包括Lorem Ipsum的版本。

版本带有。|，|？检测

const setup=（）=>{
const p=document.querySelector（'p'）；
WrapwordSwithlight（p）；
}
常量检查=（单词）=>{
//检查单词是否包含.|，|？
const hasCharacter=word.includes（“.”，word.length-1）
||word.includes（“，”，word.length-1）
||单词.包括（“？”，单词.长度-1）；
//计算实际字长
const wordLength=hasCharacter？（word.length-1）：word.length；
如果（字长>8）{
const spanContent=hasCharacter？word.substring（0，word.length-1）：word；
const-endCharacter=hasCharacter？（word.substring（word.length-1））：“”；
word=`${spanContent}${endCharacter}`；
}
else word=`${word}`；
返回词；
};
const wrapWordsWithLengthEight=（目标）=>{
//向目标呈现HTML
const text=（target.textContent.trim（）.split（“”）.map（check）.join（“”）；
target.innerHTML=文本；
}
window.addEventListener（“加载”，设置）

Lorem ipsum dolor sit amet，奉献精英。相似的建筑风格，莫迪建筑风格，原则性建筑风格，独特的设计风格，微小的照明效果？多洛尔非多洛尔累积量。
您试图在word上设置颜色，但word只是一个字符串。您需要将文本中的该字符串替换为介绍格式的span。感谢您的帮助。你能详细说明一下下面的代码吗。if（word.length>8）{word=''+word+''；}else{word；}返回单词；您正在将字符串传递给check函数，因此它不是DOM元素，并且不能对其应用任何样式。因此，您需要将单词包装在一个元素中（我选择了一个span），这样您就可以应用样式了。所以使用span不是强制性的，对吗？我经常看到span在样式设计中的应用？这不是任何规则，对吗？没错，你可以使用任何元素。Span很好，因为它是一个内联元素，所以默认情况下不会中断文本流。如果您使用例如DIV，它将进入新行（除非样式表另有说明），谢谢您的帮助。我有个问题。如果我将sample.innerHTML更改为sample.innerText，为什么上面的代码不起作用？有什么区别？我知道innerHTML包含作为字符串文本的标记，但是在上面的例子中，innerHTML和innerText都应该可以正常工作，因为中没有任何子标记。对吗？即使是textContent属性也不起作用。为什么只有innerHTML在工作？innerText是元素的纯文本内容。。。是HTML，所以它被删除了。@SaraSameer简言之，
innerText
只接受纯字符串，而
innerHTML
可能会将HTML格式字符串转换（解析）为浏览器可以呈现的真正HTML。我建议您学习MDN，了解和了解更深入的解释。