Замена нескольких текстовых строк в блоках текста с помощью jquery.each()

Question

В настоящее время я пытаюсь создать вложенные циклы для применения интерактивных определений к словам в нескольких блоках текстов. Первый внешний цикл выполняет итерации по именам определений и идентификаторов в каждом классе «n-concept» и создает новый <span>, который будет использоваться внутренним циклом. Затем внутренний цикл проходит через каждый блок «оригинал-текст» и заменяет каждый экземпляр «nounName» шаблоном <span>, созданным в первом цикле. Вот код ...

$(document).ready(function(){ 
    $('.n-concept').each(function(){   
     var nounName = $(this).find('h3').html(); 
     var nounID = $(this).attr('id'); 
     var newString = '<span data-vocabID="'+nounID+'" class="noun-name">'+nounName+'</span>'; 

     $('.original-text').each(function(){ 
      var newText = $(this).text().replace(RegExp(nounName, 'gi'), newString); 
      $(this).html(newText);     
     }); 
    }); 
}); 

В настоящее время, петли работают, но только значения для последней итерации «п-концепция» петель применяются, то есть, это не сохранение измененного значения оригинала текст. Я немного новичок в javascript и jquery, поэтому простите меня, если это действительно простая проблема для решения. От чтения, кажется, что закрытие - это то, что мне может понадобиться здесь? Любая помощь будет принята с благодарностью :)

Answer 1

Вы должны использовать метод html() вместо text(), так как метод text() игнорирует промежутки, которые вы добавляете в предыдущей итерации.

http://jsfiddle.net/erztfr5s/