制作 jQuery 原生 JavaScript

Question

我想将以下 jQuery 修复为 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);
    });
});

我实际上尝试过，但我无法按预期修复它。 关于1⃣，似乎不仅仅是如何指定元素的问题。

在 2⃣ 的情况下，它适用于$ ('a') 。 如果您指定类似document.querySelectorAll ('a')的内容，则行为将完全不同。 我会在未经许可的情况下点击它。

//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);
                }
            }
        });

})();

无论如何，我想修复即使只是1⃣。

请告诉我。

Answer 1

这至少是您第一个问题的部分解决方案：

 // 1. Disables only "a" element links contained in a particular element. // jQuery: // $(function() { $('.class1.class2 a').contents().unwrap(); }); // Vanilla JS: document.querySelectorAll('.class1.class2 a').forEach(a=>a.parentNode.innerHTML=a.innerHTML)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class2 class1"><span><a href="abc.html">link to abc</a></span></div> <div class="class3 class1"><span><a href="def.html">link to def</a></span></div>

正如 Dale Landra 已经建议的那样，我在这里缩短了您的 class 名称以提高示例的可读性。

Answer 2

1. 仅禁用特定元素中包含的“a”元素链接。
   • 首先要替换的是 $(function() {...}); 你已经用 (function() {...})();
   • 您要做的下一件事是替换 $('.test a')。 等效于第一个结果的document.querySelector或所有匹配结果的数组的document.querySelectorAll 。
   • 要遍历结果数组，我们使用array.forEach 。
   • 接下来要替换的是.unwrap function。 这基本上采用元素的outertHTML并用元素的innerHTML替换 is。

 (() => { 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>

2. 仅禁用对特定元素中包含的“a”元素的链接点击。
   • 不确定正则表达式应该做什么——运行代码似乎会产生错误，但我在答案中给出了我最好的猜测。
   • 我们已经在第一个答案中讨论了一些概念，所以跳过这些。
   • 我们通过向所选元素添加事件侦听器来替换 target.click。 一个改进可能是document.querySelectorAll('.test a[href]')只获取带有 href 元素的锚标记。
   • 然后我们执行 Ajax 调用并将调用结果写入 id 为sec的元素。
   • 我们使用匹配 function来检查 url 与正则表达式。 如果匹配，我们执行 Ajax 查询，如果不匹配，我们什么也不做。

 (() => { 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>