我正在使用以下代码突出显示段落中的一系列单词。它们都按预期突出显示。 for 循环能够拾取每个单词并突出显示它们。 我希望按顺序以不同颜色突出显示。例如:黄色、蓝色、绿色、青色等都是用来高亮的。
我尝试包含不同的 css 定义并通过 for 循环调用。我还尝试在循环中命名不同的颜色。所有这些都失败了。
我正在使用以下 js 函数来突出显示文本:
var str = "the leading blade edges of the fan blade is bulged";
for (var i = 0; i < obj.result.length; i++) {
var start = obj.result[i].startPos,
end = obj.result[i].endPos,
before = str.substring(0, start),
after = str.substring(end),
middle = "<mark>" + obj.result[i].name + "</mark>";
str = before + middle + after;
}
document.getElementById("result").innerHTML = str;
}
目前高亮发生在使用 css 中定义的“标记”的一系列单词上:
mark {
padding: 0;
background-color:yellow;
}
这是完整的工作 JFiddle
function myFunction() {
var str = "the leading blade edges of the fan blade is bulged";
var colors = ['red', 'blue', 'green', 'cyan'],
i = 0;
var obj = {
"result": [{
"name": "blade",
"startPos": 12,
"endPos": 17
}, {
"name": "bulged",
"startPos": 44,
"endPos": 50
}]
};
obj.result.sort(function(a, b) {
return b.startPos - a.startPos;
})
for (var i = 0; i < obj.result.length; i++) {
var start = obj.result[i].startPos,
end = obj.result[i].endPos,
before = str.substring(0, start),
after = str.substring(end),
middle = "<mark>" + obj.result[i].name + "</mark>";
str = before + middle + after;
}
document.getElementById("result").innerHTML = str;
}mark {
padding: 0;
background-color: yellow;
}
mark2 {
padding: 0;
background-color: blue;
}<body onload="myFunction()">
<span id="result">the leading blade edges of the fan blade is bulged</span>
</body>预期的输出是高亮颜色应该按照定义的顺序改变。相反，我始终只得到黄色。
最佳答案
详细阐述@Manjunath 的提议的编辑答案
正如@Manjunath 所建议的，在这里使用 nth-child CSS 选择器是合适的。
我想在这里列出解决方案以供将来引用，包括它应该是循环的事实，因此 CSS 将是:
mark:nth-child(4n+0) {
background: red;
}
mark:nth-child(4n+1) {
background: blue;
}
mark:nth-child(4n+2) {
background: green;
}
mark:nth-child(4n+3) {
background: cyan;
}
查看完整代码 jsfiddle
原始答案
那么，您需要使用您的新 mark2。
您可以使用 mark0 和 mark1 查看基于您自己的代码的工作方法。它不是最可扩展的代码，但它有效:
for (var i = 0; i < obj.result.length; i++) {
var start = obj.result[i].startPos,
end = obj.result[i].endPos,
before = str.substring(0, start),
after = str.substring(end),
middle = "<mark" + i%2 + ">" + obj.result[i].name + "</mark" + i%2 + ">";
str = before + middle + after;
}
还有CSS:
mark0 {
padding: 0;
background-color:yellow;
}
mark1 {
padding: 0;
background-color:blue;
}
在 https://jsfiddle.net/n9zx83ed/ 查看所有内容
关于javascript - 用不同颜色突出显示的功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57217302/