var data = [{
  corr: 'a1',
  correlation_text: 'values'
}, {
  corr: 'a2',
  correlation_text: 'student misbehavior'
}, {
  corr: 'a4',
  correlation_text: 'safety'
}, {
  corr: 'a5',
  correlation_text: 'safety'
}, {
  corr: 'a6',
  correlation_text: 'safety'
}];

var currentOccurrence = {
  'values': 1,
  'student misbehavior': 1,
  'safety': 1
};

var totalNumberOfItemsInCorrelationGrid = data.length;
var arrOfCorrelatedTextOfCorrelationGrid = [];

var _ObservationText = document.getElementById("text").textContent;

for (var i = 0; i < totalNumberOfItemsInCorrelationGrid; i++) {
  var currentDataItem = data[i];
  arr = new Array(currentDataItem.correlation_text, currentDataItem.corr);
  arrOfCorrelatedTextOfCorrelationGrid.push(arr);
}

// sorting from bigger length of string to smaller length of string
arrOfCorrelatedTextOfCorrelationGrid.sort(function(a, b) {
  return b[0].length - a[0].length; // ASC -> a - b; DESC -> b - a
});

// from https://stackoverflow.com/questions/36183/replacing-the-nth-instance-of-a-regex-match-in-javascript
var replaceNthMatch = function(original, pattern, n, replace) {
  var parts, tempParts;

  if (pattern.constructor === RegExp) {

    // If there's no match, bail
    if (original.search(pattern) === -1) {
      return original;
    }

    // Every other item should be a matched capture group;
    // between will be non-matching portions of the substring
    parts = original.split(pattern);

    // If there was a capture group, index 1 will be
    // an item that matches the RegExp
    if (parts[1].search(pattern) !== 0) {
      throw {
        name: "ArgumentError",
        message: "RegExp must have a capture group"
      };
    }
  } else if (pattern.constructor === String) {
    parts = original.split(pattern);
    // Need every other item to be the matched string
    tempParts = [];

    for (var i = 0; i < parts.length; i++) {
      tempParts.push(parts[i]);

      // Insert between, but don't tack one onto the end
      if (i < parts.length - 1) {
        tempParts.push(pattern);
      }
    }
    parts = tempParts;
  } else {
    throw {
      name: "ArgumentError",
      message: "Must provide either a RegExp or String"
    };
  }

  // Parens are unnecessary, but explicit. :)
  indexOfNthMatch = (n * 2) - 1;

  if (parts[indexOfNthMatch] === undefined) {
    // There IS no Nth match
    return original;
  }

  if (typeof(replace) === "function") {
    // Call it. After this, we don't need it anymore.
    replace = replace(parts[indexOfNthMatch]);
  }

  // Update our parts array with the new value
  parts[indexOfNthMatch] = replace;

  // Put it back together and return
  return parts.join('');
}

arrOfCorrelatedTextOfCorrelationGrid.forEach(function(item) {
  // item[0] gives value of corelated Text
  // item[1] gives value of corr i.e A1 , A2 etc.

  var _k = item[0].replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$&");
  _k = _k.replace(/^(\w)/, "\\b$1"); //This will add the word boundary at start of word only when it's useful.

  _k = _k.replace(/(\w)$/, "$1\\b"); //This will add the word boundary at end of word only when it's usefull.

  var _corelatedTextwithRegExpression = new RegExp(_k, 'g');

  _ObservationText = replaceNthMatch(_ObservationText, item[0], currentOccurrence[item[0]], "<span class='selectedTextAuto'>" + item[0] + "[" + item[1] + "]</span>");
  currentOccurrence[item[0]] ++;
});

document.write(_ObservationText);

#text {
  border: 1px black solid;
}

<div id="text">safety
  <br>
  <br>student misbehavior
  <br>
  <br>safety
  <br>
  <br>values
  <br>
  <br>safety
</div>