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

如何才能做到这一点？

Answer 1

下面是一个使用计数器对象来跟踪每个单词出现的currentOccurrence次数的解决方案。<div>每次正则表达式替换后，该计数器都会递增，因此下次看到该单词时，它将使用下一个脚注。该函数replaceNthMatch用于有选择地替换特定出现的单词。

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>