Transform jQuery function to pure JavaScript

Question

How can I transform this code written in JQuery to just JS?

Original code:

$('.abcClass').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='mail'>$&</span>"));
});

I've tried to write it like this:

document.querySelectorAll('.abcClass').forEach(function (comment) {
    comment.innerHTML(comment.toString().replace(/([^\x00-\x80]|\w)/g, "<span class='mail'>$&</span>"));
});

But I've received the errors:

Uncaught TypeError: comment.innerHTML is not a function
Uncaught TypeError: Cannot read property 'classList' of null

I'm new to jQuery so I found myself pretty much stuck at this step... any help would be appreciated! :)

You can directly assign the value to innerHTML

shrys
– shrys

2019-08-13 08:47:59 +00:00
Commented Aug 13, 2019 at 8:47 — shrys
– shrys, Commented Aug 13, 2019 at 8:47

CertainPerformance · Accepted Answer · 2019-08-13 08:46:24Z

5

While .innerHTML is a function underneath, it's a setter (and getter), so you have to set and retrieve its values as if it was a plain property value:

comment.innerHTML = comment.innerHTML
  .replace(/([^\x00-\x80]|\w)/g, "<span class='mail'>$&</span>"));

Also keep in mind that querySelectorAll returns a NodeList, and NodeLists only have a forEach method in newer browsers (mid-2016+ or so). For better backwards compatibility, consider calling Array.prototype.forEach:

Array.prototype.forEach.call(
  document.querySelectorAll('.abcClass'),
  function(comment) {
    // ...

(pretty sure you can also do NodeList.prototype.forEach = Array.prototype.forEach beforehand, but that looks really weird to me)

answered Aug 13, 2019 at 8:46

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avinash Sharma · Accepted Answer · 2019-08-13 08:55:24Z

0

Instead of using jquery .each()

$('div').each(function(){ //... })

use document.querySelectorAll(), then convert the HTMLCollection into a JavaScript array. Then you can map over the array of elements.

 const elems = document.querySelectorAll('.my-elements')
 const $elems = [].slice.call(elems)
 $elems.map( (elem) => { console.log(elem) })

answered Aug 13, 2019 at 8:55

Avinash Sharma

6536 silver badges15 bronze badges

Collectives™ on Stack Overflow

Transform jQuery function to pure JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related