Function to highlight with different colours

1
votes

I am using the following code to highlight series of words in a paragraph. They are all highlighted as intended. The for loop enables to pick up each word and highlights them. I want highlighting to take place in different colours in an order. For example: yellow, blue, green and cyan etc. are to be used to highlight.

I tried to include different css definitions and call through for loop. Also I tried to name different colour within the loop. All these failed.

I am using following js function to highlight text:

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;
}

At present highlight takes place on series of words using 'mark' as defined in css:

mark {
  padding: 0;
  background-color:yellow;
}

Here is the full working 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>

The expected output is highlight colours should change in order as defined. Instead I get only yellow consistently.

3
javascript
Use a class on your mark element and use that in css to define the different colors. – Federico klez Culloca
You can simply use mark:nth-child() property in css for that. – Manjunath
@Federico Will that change colour during every iteration? – Shiva
put the different css definitions in an array (mark = []) mark0=yellow, mark1=green, mark2=cyan. apply the class mark[i] inside the loop. – Andrew Daly
@Manjunath: I did. it is that easy!. I got it...its working thanks... – Shiva

3 Answers

2
votes

Edited answer elaborating on @Manjunath's proposal

As @Manjunath proposed, using nth-child CSS selector is appropriate here. I wanted to list the solution here for future reference, including the fact that it is supposed to be cyclic, so the CSS would be:

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;
}

See the complete code at jsfiddle

Original answer

Well, you'd need to use your new mark2.

You can see a working approach based on your own code, using mark0 and mark1. It's not the most extensible code but it works:

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;
}

And the css:

mark0 {
  padding: 0;
  background-color:yellow;
}
mark1 {
  padding: 0;
  background-color:blue;
}

See it all at https://jsfiddle.net/n9zx83ed/

0
votes

<html>
<head>
<script>
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 style=\""+"background-color:"+colors[i%colors.length]+"\""+">" + obj.result[i].name + "</mark>";

str = before + middle + after;
}
document.getElementById("result").innerHTML = str;
}

</script>
</head>
<body onload="myFunction()">

 <span id="result">the leading blade edges of the fan blade is bulged</span>

</body>
</html>

Try this if you dont want a lot of css

0
votes

You can assign your middle variable to:

middle = "<span class='mark-" + i + "'>" + obj.result[i].name + "</span>";

and change your styles as:

.mark-0 {
    padding: 0;
    background-color:yellow;
}
.mark-1 {
    padding: 0;
    background-color:blue;
}