今天有同学问如何用 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. 关于Office 中的墨迹功能(可作word电子签名)

    原文 关于Office 中的墨迹功能 通过使用 Microsoft Office 2003 中的墨迹功能,可使用 Tablet PC 和 Tablet 笔将手写笔记插入到 Microsoft Offi ...

  2. 使用Scala操作Mongodb

    介绍 Scala是一种功能性面向对象语言.它融汇了很多前所未有的特性.而同一时候又执行于JVM之上.随着开发人员对Scala的兴趣日增,以及越来越多的工具支持,无疑Scala语言将成为你手上一件不可缺 ...

  3. 4行代码实现js模板引擎

    在平时编码中,经常要做拼接字符串的工作,如把json数据用HTML展示出来,以往字符串拼接与逻辑混在在一起会让代码晦涩不堪,加大了多人协作与维护的成本.而采用前端模板机制就能很好的解决这个问题. 精妙 ...

  4. Gimp教程:制作彩色的网站横幅

    效果图: Step1.新建900x200的透明图层 Step2.点选画笔工具,在左下方的设置界面进行如下: 设置画笔,动态,颜色,勾选应用抖动,然后试着在图层上画一画,调节一下画笔大小,相信你能作出如 ...

  5. Java集合之LinkedHashSet源码分析

    1.简介 我们知道Set不允许包含相同的元素,如果试图把两个相同元素加入同一个集合中,add方法返回false.根据源码实现中的注释我们可以知道LinkedHashSet是具有可预知迭代顺序的Set接 ...

  6. CSS知识点:清除浮动

    开场白 我们平时工作中,很容易遇到浮动效果.一个DIV中嵌套多个DIV,左边显示一个DIV,右边显示一个DIV,外层DIV的高度随着内层内容的高度变化.这就是最基本的浮动效果.下图的百度搜索结果就是一 ...

  7. javascript 动态创建tip图片提示

    前言: 在做前端的项目中,经常看到移动一个小图标上显示这个图标对应的大图的提示,之前的做法是在小图标的位置后面添加一个div,然后移动到小图标然后显示这个图标的图片!但是这个方法做的时候发现,如果提示 ...

  8. Android AES加密算法,现在实际上

    昨天,老板让我来看看android加密算法.于是在网上找了找,发现AES加密算法.(当然,MD5,BASE64什么http://snowolf.iteye.com/blog/379860这篇文章列举了 ...

  9. Andy Williams 《Love Story》

    where do i beginto tell a story of how great a love can bethe sweet love story that is older than th ...

  10. IEnumerable<T>转换为IList<SelectListItem>

    扩展方法IEnumerable<T>转换为IList<SelectListItem> ,提供@Html.DropDownList使用   由于在MVC中经常会使用到@Html. ...