(function () {
  'use strict';

  var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at sapien ipsum. Integer ut sem condimentum, imperdiet turpis eget, pulvinar nisi. Suspendisse sodales, risus ac imperdiet ornare, ligula ex suscipit nisl, eu pharetra erat augue ac ipsum. Donec ut tortor quam. Sed vel velit commodo, elementum neque et, tincidunt eros. Morbi tempus elit feugiat orci pellentesque, sit amet sollicitudin tortor aliquam. Phasellus efficitur sem sit amet mi facilisis luctus. In maximus diam turpis, a eleifend metus blandit et. Proin enim massa, mattis sed semper quis, luctus sed sapien. Nulla euismod leo eget enim iaculis malesuada. Aenean sed iaculis massa. Donec ullamcorper nec nunc vel viverra. Sed tortor enim, fringilla vel urna ultricies, iaculis commodo erat. Sed iaculis pretium urna, non tristique libero facilisis in. Nulla luctus urna magna, quis rhoncus ex laoreet vel. Donec bibendum tellus quis egestas fermentum.';

  var markups = [
    {start: 0, end: 5, color: 'red'},
    {start: 6, end: 11, color: 'green'},
    {start: 12, end: 17, color: 'blue'}
  ];

  let slices = createSlicesFromText(text, markups);

  console.log(JSON.stringify(slices, ' ', 4));

  function createSlicesFromText(text, markups) {
    var slices = [{
      start: 0,
      end: text.length,
      text: text
    }];
    markups.forEach(function (markup) {
      slices = pushMarkupToSlices(slices, markup);
    });
    return slices;
  }

  function pushMarkupToSlices(slices, markup) {
    var newSlices = [];
    slices.forEach(function (slice) {
      // overlapping markups are not allowed,
      // therefore we keep the original slice
      if (slice.color) {
        newSlices.push(slice);
      } else {
        var start = Math.max(slice.start, markup.start);
        var end = Math.min(slice.end, markup.end);
        if (end - start > 0) {
          // store the left remained of the original slice
          if (slice.start < start) {
            newSlices.push({
              start: slice.start,
              end: start,
              text: slice.text.slice(0, start - slice.start)
            });
          }
          // store the overlapping, colored slice
          newSlices.push({
            start: start,
            end: end,
            text: slice.text.slice(start - slice.start, end - slice.start),
            color: markup.color
          });
          // store the rigth remainder of the original slice
          if (slice.end > end) {
            newSlices.push({
              start: end,
              end: slice.end,
              text: slice.text.slice(end - slice.start, slice.end - slice.start)
            });
          }
        // store the original slice
        } else {
          newSlices.push(slice);
        }
      }
    });
    return newSlices;
  }
}());