We have a html div (first image) and array of strings (see second image)
We have to assign the single index like safety[A4] and safety[A5] to the text of div.
But currently it assign two footnote to same text like safety[A5][A4] since safety occurs two times in the html div.
Our current attempt is:
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>"
);
});
How can this be done?
Here's a solution that uses a counter object currentOccurrence
to keep track of the number of times each word in the <div>
has been seen. After each regex replacement this counter is incremented, so the next time that word is seen it uses the next footnote. The function replaceNthMatch
is used to selectively replace a specific occurrence of a word.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With