div jQuery

Question

हम एक html div (पहली छवि) है और तार के सरणी के पाठ के लिए सूचकांक बताए (दूसरी छवि देखते हैं)

हम की तरह सुरक्षा [ए 4] एकल सूचकांक और सुरक्षा [आवंटित करने के लिए है ए 5] div के पाठ के लिए।

लेकिन वर्तमान में यह सुरक्षा [ए 5] [ए 4] जैसे टेक्स्ट में दो फुटनोट असाइन करता है क्योंकि सुरक्षा एचटीएमएल 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>