利用js查找页面中的内链，外链

时间：2020-12-17 03:44:20

起初没听说过内链外链，只有链接锚文本，在面试中被问到如何查找到页面中的内链和外链，就在想，什么是内链和外链啊？？？？？？？

后来面试官给我解释了一下他们的区别，自己稍微懂了，自己当时回答的是通过获取a标签的href属性，查找字符串中是否存在href，后来又被问到如果用选择器怎么用呢？自己不会....

后来下来又想到这个问题，觉得自己猪啊，有属性选择器来匹配，但是当时为什么回答不上来，因为这个是css3中的，自己只知道，但是不太经常用，所以第一反应没有想到，归根结底还是个熟练度的问题，没有达到熟悉的程度！

这里粘贴一下属性选择

选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

自己去网上查了一下关于内链和外链，很多讨论的都是如何提高网站的排名，和网站的优化问题，那么如何查找到内链和外链的数量呢？提供的答案是用站长工具，哈哈，不是我想要的，就贴出自己的想法吧，可能有缺陷，但能实现一定的功能

下面用自己的话通俗解释一下这些概念，自己比较讨厌官方那些比较生涩的词汇，不接地气

内链：就是自己网站内部的链接，可以跳转到自己网站内部其它页面的锚文本（超链接），如导航等....比如：<?php echo site_url('former/services');?>，这是phpCI框架形式的，其它有自己的样式，或者a标签的href=“#”或者href="javascript:void(0)"或href="javascript:"等也属于内链

外链：外链暂时自己了解到有三种类型：

  1. 锚文本（一个词或一句话有自己的链接，是链接到其他网站的，一般是http：做开头的）
  2. 纯文本链接（就如我们写文章或发博客时直接贴出来一个链接，如我现在贴我的博客地址http://www.cnblogs.com/lpshan/，它只是个链接地址，但点击不能到达目的地，自己需要粘贴到地址栏中）
  3. 反链（假设有两个页面A和B，B页面通过一个链接指向A页面，那么，B就是A的一个反链，做排名优化时有这样一句话“内链为王,外链为皇”）
   <script type="text/javascript">

   $(document).ready(function(e) {

      var allLink=$("a").length;    //a标签的总数

      var wLink=$("a[href^='http:']").length;//外链

      var nLink=$("a[href^='<?php']").length;//内链

      var bodyString=$("body").html();

      var bodyLink=(nr.split('http')).length-1; //body内的外链

      alert("bodyLink"+bodyLink+"总链有："+allLink+"外链有："+wLink+",内链有："+nLink);

 });

   </script>

写了一个bodyLink因为自己有疑问，反链中的纯文本链接，地址不在a标签的href属性中，所以对于$("a[href^='http:']").length，纯文本链接外链就查不到，所以想了下面一种方法，把body中的内容按照字符串的形式获取，再从字符串中获取http字符，但是这样有个问题需要注意，他会获取body内的所有，包括注释掉的，也是有弊端吧。

至于上面的内链获取，可以获得总连接数-外链，因为有的a标签的href=“#”或者href="javascript:void(0)"或href="javascript:"等也属于内链。

感觉面试后虽然面试官问我了没几个问题，但是引导我又学到了好几个知识，很感谢，;-)

自己在学校没人引导，自己误打误撞的学学这学学那，觉得提高的很有局限，学前端除了自己学，写项目外，最好也有人去引导，这样提高的着会相对快一些

相关文章