如何在HTML中隐藏Anchor标签的href链接？

要保留页面图标显示，同时不让爬虫从HTML里直接拿到链接，试试这几个实用方案：

• 动态通过JS添加链接
  HTML里先把真实链接存在自定义属性里，页面加载后再用JS赋值给href：

  <a class="link" data-href="/hide_this_link_from_html"><img src="printIcon.jpg"/></a>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const targetLink = document.querySelector('.link');
    targetLink.href = targetLink.dataset.href;
  });
  </script>
  普通爬虫不会执行JS，所以爬不到真实的URL，用户点击时链接完全正常，图标也能正常显示。
  
  

• 用按钮替代Anchor标签
  把a标签换成按钮，通过JS处理跳转，同时用CSS去掉按钮的默认样式，让它看起来和原来的图标一样：

  <button class="icon-btn" onclick="window.location.href='/hide_this_link_from_html'">
    <img src="printIcon.jpg"/>
  </button>
  
  <style>
  .icon-btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }
  </style>
  这种方式HTML里根本没有a标签的`href`属性，爬虫很难抓取到目标链接，用户体验不受影响。
  
  

• 拆分链接后用JS拼接
  把完整链接拆成几个部分存在自定义属性里，加载后再拼接成真实链接：

  <a class="link" data-link-part="/hide" data-link-rest="_this_link_from_html"><img src="printIcon.jpg"/></a>
  
  <script>
  document.addEventListener('DOMContentLoaded', function() {
    const targetLink = document.querySelector('.link');
    targetLink.href = targetLink.dataset.linkPart + targetLink.dataset.linkRest;
  });
  </script>
  拆分后的片段单独没有意义，只有执行JS才能得到完整链接，能进一步降低被爬虫抓取的概率。
  
  

注意：以上方法主要针对不执行JavaScript的普通爬虫，如果是能模拟浏览器执行JS的高级爬虫（比如Headless Chrome），还是有可能获取到链接，但已经能挡住绝大多数常见的爬虫了。

内容的提问来源于stack exchange，提问作者PleasePleasePleaseHelp