2

I wan to make a text highlighter: I have my paragraph in qtext and the words I want to highlight in the paragraph are in answerCodes. I want to add them a span class and highlight them in the paragraph. Any ideas would help! 

    var answerCodes = $('[id*="_label"]').text(); 
    var qText = $('.question_text').html();
    for (var i=0; i<answerCodes.length; i++) {
        need to put something here...
    }
Zygimantas
  • 553
  • 8
  • 22
  • [this](http://stackoverflow.com/questions/19720984/search-and-highlight-in-jquery) or [this](http://stackoverflow.com/questions/119441/highlight-a-word-with-jquery) probably will help you. – Elmer Dantas Jan 10 '17 at 09:42

2 Answers2

1

Generate regex based on the answer code and replace the html content.

// generate regex
var reg = new RegExp(
  // get all answer code elements
  $('[id*="_label"]')
  // iterate over them
  .map(function() {
    // get text content and
    // escape symbols which has special meaning in regex
    return $(this).text().replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');    
  })
  // get result as array
  .get()
  // join them with pipe symbol
  .join('|'),
  // set global modifier for global match
  'g');


// iterate over p
$('.question_text').html(function(i, html) {
  // replace the question code with span wrapped content
  return html.replace(reg, '<span class="highliter">$&</span>');
});


var reg = new RegExp(
  $('[id*="_label"]').map(function() {
    return $(this).text().replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
  }).get().join('|'), 'g');


$('.question_text').html(function(i, html) {
  return html.replace(reg, '<span class="highliter">$&</span>');
});
.highliter {
  color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="_label1">abc</label>
<label id="_label1">test</label>

<div class="question_text">a a a a abc bb b test dd abc fff</div>
Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
  • 1
    great answer, but i have additional question: lets say I have two labels abc and abc test, I want to avoid only abc be selected and test left not highlighted, so should I do some kind of split for '[id*="_label"]' ? – Zygimantas Jan 10 '17 at 12:14
  • @ZygimantasKairys : you need to order `abc test` first... ex : https://jsfiddle.net/buhao7r2/ – Pranav C Balan Jan 10 '17 at 12:24
  • for example:
    abc abc test abc another test
    it would highlight only 'abc' and leave test and abother not highlighted, so should there be a split [id*="_label"] that splits them lets say by ',' ? hopefully that makes sense.     – Zygimantas Jan 10 '17 at 12:26
  • @ZygimantasKairys : https://jsfiddle.net/buhao7r2/ you need to update the order for that...... – Pranav C Balan Jan 10 '17 at 12:28
  • @ZygimantasKairys : the generated regex would be `/abc|abc test/g`.... so `abc` get matched ..... to match `abc test` you need to move it and regex should be `/abc test|abc/g` – Pranav C Balan Jan 10 '17 at 12:30
  • yeah that's correct the label order has to be updated, but what if I do not have control of label order in html? – Zygimantas Jan 10 '17 at 12:32
  • @ZygimantasKairys : or you need to order the array by string length .... check here : https://jsfiddle.net/ja2v3Lnb/ – Pranav C Balan Jan 10 '17 at 12:33
  • @ZygimantasKairys : although use word boundary for exact word match : https://jsfiddle.net/tk92d8sy/ ... this would help to avoid `abc` within `abcd` – Pranav C Balan Jan 10 '17 at 12:37
0

use RegExp to replace.

for (var i=0; i< answerCodes.length; i++) {
    qText = qText.replace(new RegExp(answerCodes[0], 'g'), '<span class="highlight">$1</span>');
}
David Lee
  • 1
  • 2