Make jQuery native JavaScript

I want to fix the following jQuery to vanilla-JS.

// 1⃣Disables only "a" element links contained in a particular element.
$(function() {
    let target = //document.querySelector('.ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC.ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R').querySelectorAll('a');
        $('.ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC.ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R a');
    //document.getElementsByTagName('a');
    target.contents().unwrap();
});


// 2⃣Only link clicks on the "a" element contained in a particular element are disabled.
$(function() {
    var target = $('.ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma a');
    target.click((e) => {
        let link = '/((bhttps?://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|bftp://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|b//+?[w=.?&/-;#~%-]+(.com/|.co.jp/|www.)+(?![w?&./;#~%"=+-]*>$)|bhttps?://r?n.+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)))/';
        e.preventDefault();
        var loadContents = $(this).attr('title');
        var k = '#' + loadContents;
        $('#sec').load(link + k);
    });
});

I actually tried it, but I can’t fix it as I expected. Regarding 1⃣, it seems that it is not just the problem of how to specify the element.

In case of 2⃣, it works with $ ('a'). If you specify something like document.querySelectorAll ('a'), the behavior will be quite different. I will click it without permission.

//1⃣Disables only "a" element links contained in a particular element.
//It doesn't work even if I replace it with "$". It seems that it is not just the problem of element specification.
(function (){
let target = //document.querySelector('.ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC.ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R').querySelectorAll('a');
$('.ClapLv1TextBlock_Chie-TextBlock__Text__1jsQC.ClapLv1TextBlock_Chie-TextBlock__Text--SpaceOut__3kF8R a');
//document.getElementsByTagName('a');
//.contents().unwrap();
target.contentDocument.
Array.prototype.slice.call(target.contentDocument).forEach(function(el){
    Array.prototype.slice.call(el.childNodes).forEach(function(child){
      el.parentNode.insertBefore(child, el);
    });
    el.parentNode.removeChild(el);
  });
})();


//2⃣Only link clicks on the "a" element contained in a particular element are disabled.
//I'm trying pure Javascript. Just change the "$" in the target element.
(function() {
    var target2 = //$('.ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma a');
        document.querySelector('.ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma a');
    //document.querySelector('.ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma').querySelectorAll('a');
    //document.querySelector('.ClapLv1TextBlock_Chie-TextBlock__Text--preLine__2SRma').getElementsByTagName("a");
    //document.querySelectorAll('a');
    //document.getElementsByTagName("a");
    //document.querySelector(".ClapLv1TextBlock_Chie-TextBlock__Text--medium__3nLu4 > a");
    let link = '/((bhttps?://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|bftp://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|b//+?[w=.?&/-;#~%-]+(.com/|.co.jp/|www.)+(?![w?&./;#~%"=+-]*>$)|bhttps?://r?n.+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)))/';
        target2.click((e) => {
            //Disable link clicks
            e.preventDefault();
            for (let i = 0; i < link.length; i++) {
                if (target2.innerHTML.match(link[i])) {
                    link[i].getAttribute('title');
                    var k = '#' + loadContents;
                    var myXml = new XMLHttpRequest();
                    myXml.onreadystatechange = function() {
                        if ((myXml.readyState === 4) && (myXml.status === 200)) {
                            document.querySelector('#sec').innerHTML = myXml.responseText;
                        }
                    };
                    myXml.open("GET", link + k, true);
                    myXml.send(null);
                }
            }
        });

})();

Anyway, I want to fix even just 1⃣.

please tell me.

Answer

  1. Disables only “a” element links contained in a particular element.
    • The first thing to replace is the $(function() {…}); which you already did with (function() {…})();
    • The next thing you want to do, is replace the $(‘.test a’). The equivalent for this is document.querySelector for the first result or document.querySelectorAll for an array of all the matched results.
    • To loop through the resultant array, we use array.forEach.
    • The next thing to replace is the .unwrap function. This basically takes an element’s outertHTML and replaces is with the element’s innerHTML.

(() => {
  let target = document.querySelectorAll('.test a');
  target.forEach(t => t.outerHTML = t.innerHTML);
})();
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JQuery to JavaScript</title>
  <head>
  
  <body>
    <p class="test">
      This is a <a href="/">test</a>.
    </p>
  </body>
</html>
  1. Only link clicks on the “a” element contained in a particular element are disabled.
    • Not sure exactly what the regular expression is supposed to do – running the code seems to generate errors, but I gave my best guess in the answer.
    • We’ve already gone over some of the concepts in the first answer, so skipping those.
    • we replace target.click by adding an event listener to the selected element. An improvement might be document.querySelectorAll('.test a[href]') to only get anchor tags with an href element.
    • We then do an Ajax call and write the result of the call to element with the id sec.
    • We use the match function to check the url against the regular expression. If it matches, we do the Ajax query, if not, we do nothing.

(() => {
  let target = document.querySelectorAll('.test a');
  target.forEach(href => {
    href.addEventListener('click', function(e) {
      e.preventDefault();
      let link = /((bhttps?://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|bftp://+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)|b//+?[w=.?&/-;#~%-]+(.com/|.co.jp/|www.)+(?![w?&./;#~%"=+-]*>$)|bhttps?://r?n.+?[w=.?&/-;#~%-]+(?![w?&./;#~%"=+-]*>$)))/;
      
      let matched = false;
      e.target.getAttribute('href') && (matched = e.target.getAttribute('href').match(link));
      if (!matched) {
        //No match - do nothing
        return;
      }
      matched = matched[0];
      
      let loadContents = e.target.getAttribute('title');
      let k = '#' + loadContents;

      //Do Ajax call
      let xmlHttpRequest = new XMLHttpRequest();
      xmlHttpRequest.onreadystatechange = () => {
        if (
          xmlHttpRequest.readyState === XMLHttpRequest.DONE &&
          xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300 //Remove if you want error responses
        ) {
          document.querySelector('#sec').innerHTML = xmlHttpRequest.responseText;
        }
      };
      xmlHttpRequest.open('GET', matched + k);
      xmlHttpRequest.send();
    });
  });
})();
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JQuery to JavaScript</title>
  </head>
  
  <body>
    <p class="test">
      This is a <a href="https://www.test.com/" title="test">test</a>.
    </p>
    
    <div id="sec"></div>
  </body>
</html>