How to loop Jquery variable option list

Question

Here is the original function* ----------------------------------------

function lang(t) {

        $(".OutLbl").each(function () {
             $(this).html(
               $(this).html()
                .replace("Search", diction.wordlist.Search[t])
                .replace("By", diction.wordlist.By[t])
                .replace("Select Language", diction.wordlist["Select Language"][t])
                .replace("ID", diction.wordlist["ID"][t])
              );
            });
    };

var diction = {
    wordlist: {
        "Search": {
            dh: "ހޯދާ",
            en: "Search"
        },
        "By": {
            dh: "އިން",
            en: "by"
        },
        "Select Language": {
            dh: "ބަސް ޙިޔާރުކުރޭ",
            en: "Select Language"
        },
        "ID": {
            dh: "އައިޑީ",
            en: "ID"
        },
    }
}

**I need to simplify the replace in the above function instead of multiple replaces by

looping for each option in diction[wordlist]options

some way like**

function lang(t) {
       $(diction[wordlist] options).each( function () {
       var lll = this;
              $(".OutLbl").each(function () {
                $(this).html(
                $(this).html().replace(lll, diction.wordlist[lll][t])
                );
            });
        });
    };

the question is how to loop all options of a variable (diction.wordlist in my case) in a function, as the one I tried above doesn't work.

Thanks in advance

the question is how to loop all options of a variable (diction.wordlist in my case) in a function, as the one I tried above doesn't work. — Hussain Nasif, Jun 16 '14 at 00:14
Related/possible dup: http://stackoverflow.com/questions/8881436/jquery-find-and-replace-with-arrays — scrowler, Jun 16 '14 at 00:20

David Thomas · Accepted Answer · 2014-06-16T00:26:13.177

I'd suggest:

var diction = {
    wordlist: {
        "Search": {
            dh: "ހޯދާ",
            en: "Search"
        },
        "By": {
            dh: "އިން",
            en: "by"
        },
        "Select Language": {
            dh: "ބަސް ޙިޔާރުކުރޭ",
            en: "Select Language"
        },
        "ID": {
            dh: "އައިޑީ",
            en: "ID"
        }
    }
};

function lang(t) {
    // initialise an array to store all the words/phrases:
    var words = [];
    // iterate over the properties of the 'diction.wordlist' object:
    for (var word in diction.wordlist) {
        // if the property is a property of the defined object:
        if (diction.wordlist.hasOwnProperty(word)) {
            // we push that word into the array:
            words.push(word);
        }
    }

    // creating a new RegExp, using the constructor, which allows us
    // to use variables. We create the literal regular expression:
    // /(Search)|(By)|(Select Language)|(ID)/
    // and use case-insensitivity (i) and global (g) flags:
    var reg = new RegExp('(' + words.join(')|(') + ')', 'gi');

    // using the html method and its anonymous function, which exposes:
    // i: the index of the current element amongst the collection, and
    // oldhtml: the current innerHTML of the current element (prior to manipulation)
    $('.OutLbl ').html(function (index, oldhtml) {
        // we return the html after replacing the matchedWords (using the callback
        // of replace():
        return oldhtml.replace(reg, function (matchedWord) {
            // finding the, for example, 'diction.wordlist['Search'][t]:
            return diction.wordlist[matchedWord][t];
        });
    });
}

$('#trigger').on('click', function(e){
    e.preventDefault();
    lang('dh');
});

JS Fiddle demo.

References:

JavaScript:

Well, I'm glad to have helped. – David Thomas Jun 16 '14 at 00:28 — David Thomas, Jun 16 '14 at 00:28

score 1 · Answer 2 · edited May 23 '17 at 12:05

Try a for...in loop, sanitized with hasOwnProperty to avoid properties inherited through prototype:

$(".OutLbl").each(function () {
  var html = $(this).html();
  for(var word in diction.wordlist){
    if(diction.wordlist.hasOwnProperty(word))  {
      html = html.replace(word, diction.wordlist[word][t])
    }
  }
  $(this).html(html);
});

Note that, like your current code, it will replace only the first occurrence of each word.

To replace all of them, use regular expressions with g flag, escaping necessary characters.

var regExp = new RegExp(word.replace(/[.^$*+?()[{\|]/g, '\\$&'), "g");
html = html.replace(regExp, diction.wordlist[word][t])

How to loop Jquery variable option list

2 Answers2