时间戳

首页 > 解决方案 > 用不同颜色突出显示的功能

javascript - 用不同颜色突出显示的功能

问题描述

我正在使用以下代码突出显示段落中的一系列单词。它们都按预期突出显示。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”的一系列单词上：

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>

预期的输出是高亮颜色应该按照定义的顺序改变。相反，我始终只得到黄色。

标签： javascript

解决方案

编辑了详细说明@Manjunath 提议的答案

正如@Manjunath 建议的那样，在这里使用nth-childCSS 选择器是合适的。我想在这里列出解决方案以供将来参考，包括它应该是循环的，因此 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.

您可以看到基于您自己的代码的工作方法，使用mark0and 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/上查看所有内容

推荐阅读