为div jquery的文本分配索引

Question

我们有一个html div（第一张图片）和一串字符串（见第二张图片）

我们必须将单个索引（例如安全[A4]和安全[A5]）分配给div的文本。

但是目前它为安全[A5] [A4]这样的同一文本分配了两个脚注，因为在html div中安全发生了两次。

我们目前的尝试是：

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

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');
    alert(_corelatedTextwithRegExpression);

    _ObservationText = _ObservationText.replace(
        _corelatedTextwithRegExpression,
        "<span class='selectedTextAuto'>$&[" + item[1] + "]</span>"
    );
});

如何做到这一点？