JS 将 HTML 编码实体中的 href 更改为 onclick

Question

我正在遍历一个数据库，该数据库的字符串包含 HTML 个实体：

"<div class=\"md\">这是一个<a href=\"<a href="http://example.com" rel="nofollow">http://example.com</a>\">example link</a>\n\nHere is some body text for you with superscript and a bit of boldness and some italics. I forgot to mention this regular link here <a href=\"<a href="http://example.com" rel="nofollow">http://example.com</a>\"><a href="http://example.com</a&gt" rel="nofollow">http://example.com</a&gt</a>; so don't forget that one. sometimes there can be more than one <a href=\"<a href="http://example.com" rel="nofollow">http://example.com</a>\">formatted link</a> and <a href=\"<a href="http://example.com" rel="nofollow">http://example.com</a>\"><a href="http://example.com</a></p&gt" rel="nofollow">http://example.com</a></p&gt</a>;\n\n<ul>\n<li>到此为止</li>\n<li>一些示例文本可以使用</li>\n</ ul>\n\n<del>删除线</del>\n\n<pre><code>if(canCode){\n //lol don't kid yourself\n }\n\n

Answer 1

将 html 个元素添加到 DOM 之后。以下代码工作（未经测试），

var $aTags = $('div.md').find('a');

$aTags.each(function() {
   var $aTag = $(this),
       href = $aTag.attr('href');
   $aTag.on('click',function(e) {
      myfunc(href);
      e.preventDefault();
   });
});

您的示例中的更新代码（已测试）

var test = decodeHtml("&lt;!-- SC_OFF --&gt;&lt;div class=\"md\"&gt;&lt;p&gt;Here is an &lt;a href=\"http://example.com\"&gt;example link&lt;/a&gt;&lt;/p&gt;\n\n&lt;p&gt;Here is some body text for you with &lt;sup&gt;superscript&lt;/sup&gt; and a bit of &lt;strong&gt;boldness&lt;/strong&gt; and some &lt;em&gt;italics&lt;/em&gt;. I forgot to mention this regular link here &lt;a href=\"http://example.com\"&gt;http://example.com&lt;/a&gt; so don&amp;#39;t forget that one. sometimes there can be more than one &lt;a href=\"http://example.com\"&gt;formatted link&lt;/a&gt; and &lt;a href=\"http://example.com\"&gt;http://example.com&lt;/a&gt;&lt;/p&gt;\n\n&lt;ul&gt;\n&lt;li&gt;so there you go&lt;/li&gt;\n&lt;li&gt;some sample text to work with&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;p&gt;&lt;del&gt;strikethrough&lt;/del&gt;&lt;/p&gt;\n\n&lt;pre&gt;&lt;code&gt;if(canCode){\n    //lol dont kid yourself\n}\n&lt;/code&gt;&lt;/pre&gt;\n&lt;/div&gt;&lt;!-- SC_ON --&gt;")

$(document.body).append(test);

var $aTags = $('div.md').find('a');

$aTags.each(function() {
   var $aTag = $(this),
       href = $aTag.attr('href');
   $aTag.on('click',function(e) {
     myfunc(href);
     e.preventDefault();
   }); 
});

function myfunc(href) {
  alert(href);
}

function decodeHtml(html) {
   var txt = document.createElement("textarea");
   txt.innerHTML = html;
   return txt.value;
}

Answer 2

$('a').each(function () {
    var href = $(this).prop('href');
    $(this).click(function (e) {
        e.preventDefault();
        myFunc(href);
    });
    $(this).removeProp('href');
});

Answer 3

function myFunction(link) {
  console.log(link)
}

var html = "<!-- SC_OFF --><div class=\"md\"><p>Here is an <a href=\"http://example.com\">example link</a></p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here <a href=\"http://example.com\">http://example.com</a&gt; so don&#39;t forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link</a> and <a href=\"http://example.com\">http://example.com</a></p&gt;\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n    //lol dont kid yourself\n}\n</code></pre>\n</div><!-- SC_ON -->";

$(html).filter(":not(comment)")
.find("a").each(function() {
  var link = this.href;
  $(this)
  .attr({"href": "#", "onclick":"myFunction('"+link+"')"}) 
}).addBack().appendTo("body")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

Answer 4

 $(document).ready(function () {

     var szData="<div class=\"md\"><p>Here is an <a href=\"http://example.com\">example</a></p>\n\n<p>Here is some body text for you with <sup>superscript</sup> and a bit of <strong>boldness</strong> and some <em>italics</em>. I forgot to mention this regular link here <a href=\"http://example.com\">http://example.com</a&gt; so don&#39;t forget that one. sometimes there can be more than one <a href=\"http://example.com\">formatted link</a> and <a href=\"http://example.com\">http://example.com</a></p&gt;\n\n<ul>\n<li>so there you go</li>\n<li>some sample text to work with</li>\n</ul>\n\n<p><del>strikethrough</del></p>\n\n<pre><code>if(canCode){\n    //lol dont kid yourself\n}\n</code></pre>\n</div>"


     $('.content').html(szData);

     $('.content').find('a').each(function () {


         $(this).on('click', function (e) {
             myfunc($(this).attr('href'));
             e.preventDefault();
         });

         $(this).removeAttr('href');
     });


     function myfunc(szhref)
     {
         alert('myfunc')
     }
});

Answer 5

插入之前，您可以运行这个replace:-

html = html.replace(/href=\"([^\"]+)\"/gi, 'onClick="myFunc(\'\')"')

使用群组捕获和</code> 正则表达式中的 <code>( ... ) 组将值捕获为 1，因为 0 始终是完整捕获，在您的情况下 href="http://example.com"

然后在第二个参数中，您可以使用 [=17=] 作为完整的，或作为您的捕获组。

JS 将 HTML 编码实体中的 href 更改为 onclick

JS Change hrefs to onclicks in HTML encoded entities

html

javascript

jquery

html-entities