issue with the code not working in internet explorer

Question

I am using one code which is working in all browsers but not in IE11 or IE10

how can i fix it

$(`#${formID} textarea:not(.ctype)`).each(function(k) {

because it seems the usage of the ` is problematic and IE does not like it

Answer 1

If you want to mock template literals in IE, the closest thing you can do is format a string and replace placeholder values with an entry map.

// Custom formatter function
function frmt(str, obj) {
  return Object.entries(obj).reduce(function(acc, [key, val]) {
    return acc.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), val);
  }, str);
}

// jQuery selector
const selector = frmt('#${formID} textarea:not(.ctype)', { formID: 'my-form' });

console.log(selector);

$(selector).each(function(textarea) {
  console.log($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <textarea>A</textarea>
  <textarea>B</textarea>
  <textarea class="ctype">C</textarea>
</form>

---

If you want to make the code portable, you can write a jQuery plugin:

// Custom selector plugin
(function($) {
  $.sel = function(selector, repl) {
    return $(Object.entries(repl).reduce(function(acc, [key, val]) {
      return acc.replace(new RegExp('\\$\\{' + key + '\\}', 'g'), val);
    }, selector));
  };
})(jQuery);


$.sel('#${formID} textarea:not(.ctype)', { formID: 'my-form' })
  .each(function(textarea) {
    console.log($(this).text());
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my-form">
  <textarea>A</textarea>
  <textarea>B</textarea>
  <textarea class="ctype">C</textarea>
</form>