JS中给正则表达式加变量

2017-05-31 13:35:23

一、字面量

其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如:

var s = "string";

var a = [1,2];

var o = {};

 

 

如果需要加入变量,那也是十分简单的事情,比如:

var v = "bl";

 

var s = "string" + v;  //"stringbl"

var a = [1,v];  //[1,"bl"]

var o = {first : v};  //{first : "bl"}

 

 

但是,如果碰到了用正则字面量,貌似一切就没这么好了。

var v = "bl";

var re = /^\d+$/gim;

这时,假如你想给\d+后面加入v这个变量,你会发现,没法弄。因为无论你怎么写,都会被当作正则的一部分来处理。

 

 

二、构造函数

在JS的世界中。除了null,undefined。其余皆是对象。

不过,这里肯定有人说,string、number、boolean怎么会是对象呢。

其实虽然我上面那句话不准确,但确实是最直观的感受。因为string、number、boolean在你用的时候,会默认的被相应的基本包装类型给转换成对象。

然后我们又知道,在JS中,所有的对象都是通过构造函数来生成的。

那么,我们就可以用构造函数来代替字面量定义法,例如:

var s = new String("string"); //String对象,toString()后为"string"

var a = new Array(1,2); //[1,2]

var o = new Object();  //{}

 

 

相应的,我们也可以用构造函数来生成正则表达式

var re = new RegExp("^\\d+$","gim"); //注意,反斜杠需要转义

那么,给它加变量,就和我们前面写的给字符串加变量一样了。

var v = "bl";

var re =new RegExp("^\\d+" + v + "$","gim"); // re为/^\d+bl$/gim

至此,最初的问题问题也完全解决了。

 

 

另外,还有一种方法是用过eval动态执行一段字符串的方法,不过我觉得从各方面来说,都属下策。

var re = eval("/^\\d+" + v + "$/gim")


  • 2020-04-15 17:00:07

    export和import的理解,这一篇问扎根就够了

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

  • 2020-04-15 21:14:13

    .d.ts与.ts的区别 .d.ts怎么用

    在TypeScript项目中直接引入Javascript包是不能使用的,因为包中缺少TypeScript类型声明,如果是自己写的包,可以考虑自己增加一个.d.ts类型声明文件,如果代码比较多或者使用的是第三方的包,自己写就比较麻烦了。第三方的包首先考虑找一个别人写好的声明文件,如果没有可以使用一些自动生成声明文件的工具。

  • 2020-04-17 09:27:38

    推荐一个老前端开发者的博客

    前端修炼场,首页标签大全greenSock前端研究VUE研究我们的作品flash技术探讨开发心得个人档案培训与招聘服务报价

  • 2020-04-17 09:41:47

    前端css博客推荐

    这个博客有大量的css内容,有svg,TweenMax等教程,抽空通读一下

  • 2020-04-17 10:20:47

    GreenSocks Animation Platform详细工作机制以及TweenMax用法

    GSAP(GreenSocks Animation Platform)是一个性能较好的前端动画库。最近在写一个前端SVG动画编辑器时选择了它作为底层的动画库。为了减少踩坑,我大致浏览了它的源代码,这篇文章主要是对我的理解进行记录。 我会先简单介绍一下这个动画库的API,再介绍它的插件机制,最后会从一个用例出发跟踪其运行机制。

  • 2020-04-17 10:39:02

    CSS 滤镜技巧与细节,实现火焰,融合等特效

    简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。

  • 2020-04-17 10:42:29

    (三)TweenMax运动效果

    运动效果 实例化对象.set() 立刻运动到指定地点,不用加时间