标签：至少1个，最多5个
最近遇到一个需求：用postMessage来实现跨域通信。其中有一个注意的地方：即接收方来收到消息时需要对发送方的 origin 进行检查，如果不是目标发送方，则什么都不做，这是出于安全考虑推荐的方式。
我手中有的数据有：消息事件中的 event.origin(即当前发送方的源)、目标发送方的url字符串。所以为了进行安全检查，我得先从目标发送方的url字符串中提取出 origin信息。
那么问题来了，怎么提取呢？——当然用正则表达式最简单！
origin是什么
在介绍提取的正则表达式之前，我们得先搞清楚我们要提取的是url字符串中的哪一部分的字符。我们知道要提取的是origin信息，那origin是什么意思呢？前端开发经常听到一个词“同源策略”，origin即为其中的“源”。一个 URL 具体由哪几部分组成，可以参考。而 origin = scheme(协议)+ domain(域名)+port(端口)例如：url= "http://baidu.com:8080/pub/new";origin = "http://baidu.com:8080";
匹配正则表达式
我想用 RegExp.exec()方法来提取 origin。构造一个有两种方法:
RegExp(pattern [, flags])， 如 new RegExp("ab+c", "i");
/pattern/flags， 如 /ab+c/i;
注意：很多人误认为这2种方法的区别只在于前者 pattern 是一个字符串，我原本也是这么认为的。结果就被这个潜意识坑得很惨。
匹配 origin 的正则 pattern 如下所示，能匹配http/https协议、域名中带“-”、“_”字符如“dx-meituan.dxw_mei.com”。至于具体如何匹配到每一个字符的，请自行参考。
^https?://[\w-.]+(:\d+)?
下面将分别用前面介绍的2种方法创建 RegExp 对象，看看会遇到什么坑儿。
RegExp(pattern [, flags])
var url = "https://dx.sansan.com:8080/test/index";
var origin = new RegExp("^https?://[\w-.]+(:\d+)?","i").exec(url)[0];
结果：null, 即没有找到任何匹配结果
怎么会这样？？！！没有问题呀，我重新检查了每一个字符具体匹配过程，确实没问题呀。。。。
var url = "https://dx.sansan.com:8080/test/index";
var origin = new RegExp("^https?://[\\w-.]+(:\\d+)?",i).exec(url)[0];
结果：https://dx.sansan.com:8080
居然匹配成功了！！！这是个什么鬼？
原来是因为使用new RegExp(pattern [, flags])去创建一个正则对象，pattern 是一个 string 类型，所以 pattern 里面的所有字符都是要匹配的真实字符。如 pattern = “\w”，就是从“\world”中匹配“w”这个字母，而不是匹配 0-9或 A-Z 或 a-z 中的一个字符。所以要想达到后一种效果，就得写成pattern = “\\w”。这也解释了匹配"."这个字符时，不用写成“\.”（因为.是正则中的特殊字符，要想匹配"."字符一般要写成"\."）。
我实验后的结论是：使用new RegExp(pattern [, flags])，pattern中字符就是要匹配的字符，其中单一的“\”会被忽略，如"\w"=="w"; 要想使用正则中的包含“\”的特殊符号（如\w和\d），得写成"\\w"和"\\d"。
/pattern/flags
var url = "https://dx.sansan.com:8080/test/index";
var origin = /^https?://[\w-.]+(:\d+)?/i.exec(url)[0];
结果：报错 unexpected SyntexError !!
语法错误，这个比较容易排查。发现是"?://"中的"/"与 /pattern/flags 中的"/"冲突了，在这种方式下，"/"字符变成了一个特殊字符。
var url = "https://dx.sansan.com:8080/test/index";
var origin = /^https?:\/\/[\w-.]+(:\d+)?/i.exec(url)[0];
结果：https://dx.sansan.com:8080
匹配成功了！所以这种方式匹配时，正则中的特殊符号如\w和\d是生效的，但要想匹配"//",得写成"\/\/"。
所以以前自己的潜意识认知就存在错误。下面两种方式匹配字符串时，pattern 除了是否是字符串类型，写法上有些字符也是不同的。
RegExp(pattern [, flags])， 如 new RegExp("ab+c", "i");
/pattern/flags， 如 /ab+c/i;
0 收藏&&|&&6
你可能感兴趣的文章
赞赞赞，增加两种方法
let url = 'http://www.example.com:8080/some/path?name=value#anchor';
let urlObj = new URL(url);
console.log(`${urlObj.protocol}//${urlObj.host}`);
let a = document.createElement('a');
console.log(`${a.protocol}//${a.host}`)
赞赞赞，增加两种方法
let url = 'http://www.example.com:8080/some/path?name=value#anchor';
let urlObj = new URL(url);
console.log(`${urlObj.protocol}//${urlObj.host}`);
let a = document.createElement('a');
console.log(`${a.protocol}//${a.host}`)
string split 最简单
string split 最简单
哈哈哈，说的也对，直接url.split("/")，然后在组合起来。我就是趁机练练正则~~
哈哈哈，说的也对，直接url.split(&/&)，然后在组合起来。我就是趁机练练正则~~
我一直在想为啥 JS 没有提供一个构造 URL 对象的方法，原来真的有！刚才学习了下，这个是试验中的新功能，目前只有 chrome 和 Firefox 支持，好期待这个功能~~new URL(url).origin 就能获取源信息了
我一直在想为啥 JS 没有提供一个构造 URL 对象的方法，原来真的有！刚才学习了下，这个是试验中的新功能，目前只有 chrome 和 Firefox 支持，好期待这个功能~~new URL(url).origin 就能获取源信息了
其实我觉得构造a元素的方法更赞~
其实我觉得构造a元素的方法更赞~
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。出个origin账号。学生党急用钱_百度贴吧
出个origin账号。学生党急用钱
可以走闲鱼交易，战地1加高级会员，战地3和战地4全DLC，极品飞车17 19黄金版。泰坦2
看上的加QQ
origin跳蚤市场吧5
origin跳蚤市场吧5
steam跳蚤市场吧12
steam跳蚤市场吧12
能改密保啥的？
steam交易吧9
出个丑女座
origin跳蚤市场吧6
origin跳蚤市场吧11
这个句子精辟到只有十五个字的说
origin跳蚤市场吧1
origin跳蚤市场吧11
键盘上打出十五字只为混一点经验
贴吧热议榜
使用签名档&&
保存至快速回贴Origin出现一个问题导致程序停止工作，请关闭程序，这是什么原因？如何解决？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。16被浏览<strong class="NumberBoard-itemValue" title="1分享邀请回答36 条评论分享收藏感谢收起21 条评论分享收藏感谢收起写回答1 个回答被折叠（）想出一个origin账号【origin跳蚤市场吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0可签7级以上的吧50个
本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：9,915贴子：
想出一个origin账号
想出一个origin账号 包括 战地1 泰坦 2 战地系列 （1 2 3 4 ）泰坦系列 （1 2）还有一些旧的游戏孤岛危机 极品飞车镜之边缘龙腾世纪价格450左右
能只要泰坦陨落2吗，转移
账号还有么
贴吧热议榜
使用签名档&&
保存至快速回贴}