今天有同学问如何用 JS 正则表达式获取一段文本中的超链接,并对超链接进行处理,想了几分钟,写了下面的代码:

var re = /https?:\/\/[\w\.:~\-\d\/]+(?:\?[\w\d\-_&=%]+)?(?:#[^\s]+)?/i;

这个正则表达式处理这种类型的URL:

protocol://host:port/path?param=value#xxoo

想法是好的,但总要测试通过才可以,随即又写了一段获取页面内所有带有 src, href 属性的代码:

function getGoodUrls() {
var slice = [].slice, srcs, hrefs, links, hasAsk;
hasAsk = function(url){
return url ? (url.indexOf('http') === 0 && url.indexOf('?') > -1) : false;
};
srcs = slice.call(document.querySelectorAll('[src]'), 0);
srcs = srcs.map(function(dom){ return dom.src; }).filter(hasAsk);
hrefs = slice.call(document.querySelectorAll('[href]'), 0);
hrefs = hrefs.map(function(dom){ return dom.href; }).filter(hasAsk);
links = srcs.concat(hrefs);
return links
}

ok,开测:

links.forEach(function(s){
  //加上中文看中文会不会被选中
s = s + '发大家看法';
console.log('%cbefore: ' + s, 'color:red;')
console.log('%cafter: ' + s.replace(re, function(href){
return '<a href="' + href + '"><img/></a>';
}), 'color: green');
});

结果,多数URL都还是通过了的,也有少部分无法通过,比如像:http://xx.oo?next=http://oo.xx
不过这个不算特别常见,暂时就算了,以后要用到再修改

js 获取页面内链接的更多相关文章

  1. JS获取页面数据执行Ajax请求

    下面这个例子展示了如何使用js获取页面中元素的值,并且将这些值作为参数执行Ajax请求. $("#submit-task").bind("click", fun ...

  2. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  3. 获取页面内iframe里面的元素

    结构直接看图比较直接 这里window.frames获取的是iframe的数组 要记得给iframe加个ID才行 后面的记录会详细讲解 在父窗口获取页面内的iframe 里面的元素window.fra ...

  4. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  5. JS获取页面传过来的值

    利用JS获取页面的传值,此方法只适应Get传值. 获取页面之间的传值,在后台我们很容易获取,那我们在前台只利用JS怎么写呢? 在看代码之前你需要了解的 ① 参考:W3C Location 对象 Loc ...

  6. js获取页面所有搜索条件

    <div class="search">        产品简码:@Html.TextBox("ProCode", "")    ...

  7. js获取页面缩放比例

    今天在网上看到一位大神写的一篇文章,出处记不得了,只是因为我在做项目的时候需要用到所以看了一眼. 经理要求我把两张图表上下排列(非响应式的)改成可以适配浏览器的,刚开始只是想改样式,看到代码才发现原来 ...

  8. js获取页面url的方法

    我们可以用javascript获得其中的各个部分 1, window.location.href 整个URl字符串(在浏览器中就是完整的地址栏) 本例返回值: http://ifisker.com/b ...

  9. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

随机推荐

  1. [Unity3D]Unity3D游戏开发之Unity与Android交互调用研究

    各位朋友,大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei.在前一篇文章中,我们研究了Android平台上Unity3D的手势操作并在之前的基础 ...

  2. 使用flex和bison实现的sql引擎解析

    因为老师要求,近期在做oceanbase存储过程的实现,在oceanbase 0.4曾经是不支持存储过程的.实现的主要步骤主要包含 1.语法解析 2.词法解析 3.详细运行语法树的步骤 如今先来说说语 ...

  3. JS实现全选,用于界面批量操作向后台传值时使用

    function seltAll(){ var chckBoxSign = document.getElementById("ckb"); //ckb 全选/反选的选择框id va ...

  4. Thrift实践

    Thrift实践:(一)安装 -- 未完待续   1. 新建一个目录,C:\test\thrift-test,里面建2个子文件夹,client-node和sever-csharp,然后把Thrift官 ...

  5. SQLServer 2005 数据库定阅复制实现双机热备(主要是sharepoint 内容数据库)

    原文:SQLServer 2005 数据库定阅复制实现双机热备(主要是sharepoint 内容数据库) 场景 公司最近的sharepoint的数据库服务器老是出问题,并且在一旦出现问题,就导致无法正 ...

  6. Spring Resource之ResourceLoader

    ResourceLoader接口意味着任何实现的对象都能够返回Resource实例. public interface ResourceLoader { Resource getResource(St ...

  7. shell awk统计重复个数

    awk是一个很强大的工具,一个常见的用法就是统计一个文件中重复的列值的个数,这也是面试时面试官经常问的一个问题. 举个例子: 有个文件file.log的内容如下: http://www.sohu.co ...

  8. leetcode[70] Simplify Path

    题目的意思是简化一个unix系统的路径.例如: path = "/home/", => "/home"path = "/a/./b/../../ ...

  9. openwrt构建过程探索

    参考网站:http://wiki.openwrt.org/doc/howto/buildroot.exigence 需要下载必要的库文件,编译器等... 1 首先要获得openwrt的源码,参考ope ...

  10. 实例学习SSIS(三)--使用包配置

    原文:实例学习SSIS(三)--使用包配置 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SSIS(四)- ...