new RegExp(Reg).test(value)无效

目录

前沿

问题分析

[eval 函数](#eval 函数)

[# 定义和用法](# 定义和用法)

[# 语法](# 语法)

[# 浏览器支持](# 浏览器支持)

[# 实例](# 实例)

使用eval函数

优化

拓展


------ 要么旅行,要么读书,身体和灵魂必须有一个在路上。

前沿

之前写过一篇正则表达式的基础:http://t.csdnimg.cn/45Da3

今天继续讲讲在实际场景中的运用。

问题分析

当正则表达式来自服务端时,通过一下代码是无法进行test的

javascript 复制代码
const handleInput = (value, item) => {
  if (!value) return;
  const regex = new RegExp(item.reg);
  const result = regex.test(value);
  item.checked = result;
};

因为item.reg严格来说已经不是一个正则脚本,而是一个字符串

javascript 复制代码
# /^\d{15,17}$/ 是验证 手机机身码(IMEI) 的正则表达式

  console.log(typeof item.reg);
  --> string
  console.log(typeof /^\d{15,17}$/);
  --> object

经过校验,可以使用 JavaScript eval() 函数

eval 函数

# 定义和用法

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。

如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。

# 语法

javascript 复制代码
eval(string)

|--------|--------------------------------------------|
| 参数 | 描述 |
| string | 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。 |

# 浏览器支持

# 实例

执行JavaScript代码或表达式:

javascript 复制代码
eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));

以上实例输出结果:

javascript 复制代码
200
4
27

使用eval函数

更新代码:

javascript 复制代码
const handleInput = (value, item) => {
  if (!value) return;
  const regex = new RegExp(eval(item.reg));
  const result = regex.test(value);
  item.checked = result;
};

校验

javascript 复制代码
const regex = new RegExp(eval(item.reg));
console.log(typeof regex);
--> object

说明经过eval处理过的字符串正则已经被编译成脚本来执行了。

你以为这样就完了?看看这段官方话

永远不要使用 eval!

eval() 是一个危险的函数,它使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方(不怀好意的人)修改,你最终可能会在你的网页/扩展程序的权限下,在用户计算机上运行恶意代码。更重要的是,第三方代码可以看到某一个 eval() 被调用时的作用域,这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。

优化

通过以上分析,无外乎就是需要将item.reg字符串转成函数(脚本)即可正常test。

那么,现在就来实现吧,先定义一个转换函数的函数looseJsonParse

javascript 复制代码
function looseJsonParse(obj) {
  return Function('"use strict";return (' + obj + ")")();
}

再优化我们原先的代码

javascript 复制代码
const handleInput = (value, item) => {
  if (!value) return;
  const regex = new RegExp(looseJsonParse(item.reg));
  console.log(typeof regex);
  const result = regex.test(value);
  item.checked = result;
};

这里可以看到他的输出:

javascript 复制代码
  const regex = new RegExp(looseJsonParse(item.reg));
  console.log(typeof regex);
  --> object

拓展

当然,如果你看过我之前分享的文章《常用正则表达式》: 常用正则表达式(含图解)_正则表达式图标-CSDN博客

里面的几种使用正则表达式的方法:

javascript 复制代码
# 创建正则表达式对象,使用RegExp构造函数
const regex = new RegExp(/^\d{15,17}$/);
const result = regex.test(regex);


# 使用String.prototype.match()方法匹配正则表达式
'string'.match(/^\d{15,17}$/);

同理,附上 match 的同等代码

javascript 复制代码
const handleInput = (value, item) => {
  if (!value) return;
  const result = value.match(looseJsonParse(item.reg));
  item.checked = result;
};

最后,无论你使用哪一种方法,只要安全、节省性能、代码精炼就是好方法,值得推荐给大家使用。如果你有更好的注意不妨分享出来给大家~

相关推荐
前端每日三省几秒前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_985几秒前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
契机再现2 分钟前
babel与AST
javascript·webpack·typescript
渊兮兮2 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code2 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
和你一起去月球3 分钟前
TypeScript - 函数(下)
javascript·git·typescript
_Legend_King9 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
余生H11 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
景天科技苑24 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
石小石Orz33 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法