I have a string and I want to replace text with html font colors and I need to replace using a dictionary containing the start of the span (key) and the length of the span (value). Any idea on how to do this in JS so that all my text is replaced correctly with html?

```
str = "Make 'this' become blue and also 'that'."

// color_dict contains the START of the span and the LENGTH of the word.
// i.e. this & that are both size 4.

color_dict = {6: "4", 34: "4"};

console.log(str.slice(6, 10));  //obviously this is just a slice
console.log(str.slice(34, 38));

// This is what I would like at the end.

document.write("Make '<font color='blue'>this</font>' become blue and also '<font color='blue'>that</font>'.");

```

Overall, I'd like to replace the original string with some html but using the dictionary containing the text start and length of the substring. 

Thank you so much!