.each() doesn't push duplicate items

Question

I am using .each() to push / inject html elements to dynamically create popover (for dictionary definitions). However I notice if the same word is repeated in a sentence the elements are not pushed after the first occurrence.

Here's my code:

(function($) {

  $.fn.definitions = function(words) {
    console.log("words: ", words); // returns words array

    var count = 0;
    var html;
    // Iterate over a jQuery object, executing a function for each matched element.
    return this.each(function() {
      var _results = [];
      var _term = words["term"]; //console.log(_term);  //return each definition / word pair object in a single array
      var _this = $(this); //console.log(_this);  //$(this) returns a jQuery object that wraps the element (all jQuery functions)

      if (_term.length > 1) {
        $.each(_term, function(key, val) {

          _results.push(
            _this.html(function(index, htmlContent) {
              if (
                _this
                .text()
                .indexOf(val["word"]) >= 0 //word length > 0
              ) {
                //console.log(key);
                return (html = define_replace(
                  val["word"],
                  val["definition"],
                  val["kana"],
                  val["romaji"],
                  val["note"],
                  htmlContent,
                  key
                ));
              }
            })
          );
        });

      }
    }); //end  return this.each(function()
  }; //end  $.fn.definitions

  //inject class before and after found word in html
  var define_replace = function(word, def, kan, rom, note, html, key) {
    //console.log(arguments);
    var re;

    return html.replace(
      word + " ",
      '<a data-html="true"' +
      'data-toggle="popover"' +
      'data-title="' + word + '"' +
      'data-content="definition">' +
      word + " " + "</a>",
      "gi"
    );
  }; // end define_replace 
}(jQuery));

$(function() { //can remove function and $words to words                
  var $words = [{
      word: "今日",
      definition: "adjective today, this day, these days, recently, nowadays"
    },
    {
      word: "毎日",
      definition: "every day"
    },
    {
      word: "も",
      definition: "adjective today, this day, these days, recently, nowadays"
    },
    {
      word: "頑張りましょう",
      definition: "verb to persevere, to persist, to keep at it, to hang on, to hold out, to do one\'s best"
    },
  ];

  $('.define').definitions({
    term: $words
  });

}); //end $(function()

$(function () {
  $('[data-toggle="popover"]').popover()
})

HTML

<p class="define">毎日 今日 も 今日 頑張りましょう </p>

Here is a codepen link to the code in action. As you can see the repeated word in the middle is not activating and in the console it has no markup pushed to it.

Answer 1

I think that html.replace() will only replace the first occurrence of the word. That's why only the first word got replaced with new html string. In order to fix this, you should use regular expression to replace all the occurrences of the word.

Fix the define_replace() as followed:

//inject class before and after found word in html
var define_replace = function(word, def, kan, rom, note, html, key) {
   //console.log(arguments);
   var re;

   // Use regular expression here instead
   var regex = new RegExp(word + " ", 'g')

   return html.replace(
     regex,
     '<a data-html="true"' +
     'data-toggle="popover"' +
     'data-title="' + word + '"' +
     'data-content="definition">' +
     word + " " + "</a>",
     "gi"
   );
 }; // end define_replace 
 }(jQuery));

Look at the new codepen link here. Hope that helps!