przypisywanie indeks tekst div jQuery

Question

mamy div HTML (pierwsze zdjęcie) i tablicę łańcuchów (patrz drugie zdjęcie)

Musimy przypisać jeden indeks podobnego bezpieczeństwa [A4] i bezpieczeństwo [ A5] do tekstu div.

Ale obecnie przypisuje dwa przypisy do tego samego tekstu, jak bezpieczeństwo [A5] [A4], ponieważ bezpieczeństwo występuje dwa razy w html div.

Nasza obecna próba jest:

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

Jak można to zrobić?

Answer 1

Oto rozwiązanie, które wykorzystuje obiekt licznika currentOccurrence do śledzenia liczby wyświetleń każdego słowa w kodzie <div>. Po każdej wymianie wyrażenia regularnego ten licznik jest inkrementowany, więc przy następnym wyświetleniu tego słowa używa następnego przypisu. Funkcja replaceNthMatch służy do selektywnego zastępowania określonego wystąpienia słowa.

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>