어떻게 URL 문자열 에서 origin (scheme + domain + port) 정 보 를 추출 합 니까?

머리말
최근 에 하나의 수요 에 부 딪 혔 다. postMessage 로 크로스 도 메 인 통신 을 실현 하 는 것 이다.그 중 하 나 는 수신 자가 메 시 지 를 받 으 러 올 때 발송 자의 origin 에 대해 검 사 를 해 야 하 며 목표 발송 자가 아니라면 아무것도 하지 않 는 다 는 점 이다. 이것 은 안전 을 고려 하여 추천 하 는 방식 이다.
내 손 에 있 는 데 이 터 는 메시지 이벤트 의 이벤트. 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 대상 을 구성 하 는 데 는 두 가지 방법 이 있다.

RegExp (pattern [, flags]), 예 를 들 어 new RegExp ("ab + c", "i");

/ pattern / flags, 예 를 들 어 / ab + c / i;

주의: 많은 사람들 이 이 두 가지 방법의 차 이 는 전자 pattern 이 하나의 문자열 이 라 고 오해 합 니 다. 저도 원래 그렇게 생각 합 니 다.결국 이 잠재의식 에 비참 하 게 빠 졌 다.
origin 과 일치 하 는 정규 pattern 은 다음 과 같 습 니 다. http / https 프로 토 콜, 도 메 인 이름 에 '-', '' 문 자 를 가 진 'dx - meituan. dxw mei. com' 과 일치 합 니 다.모든 문자 에 어떻게 일치 하 는 지 에 대해 서 는 RegExp 대상 을 참고 하 시기 바 랍 니 다.
^https?://[\w-.]+(:\d+)?
앞서 소개 한 두 가지 방법 으로 RegExp 대상 을 만 들 고 어떤 구 덩이 를 만 날 지 살 펴 보 자.

RegExp(pattern [, flags])

TEST 0:

var url = "https://dx.sansan.com:8080/test/index";
var origin = new RegExp("^https?://[\w-.]+(:\d+)?","i").exec(url)[0];

결과: null, 즉 일치 하 는 결 과 를 찾 지 못 했 습 니 다.
어떻게 이 럴 수가 있어??!!문제 없 는데........................................................................
TEST 1：

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

TEST 0:

var url = "https://dx.sansan.com:8080/test/index";
var origin = /^https?://[\w-.]+(:\d+)?/i.exec(url)[0];

결과: 예상 치 못 한 신 텍 스 오류!!
문법 이 틀 렸 으 니 이것 은 비교적 조사 하기 쉽다."?: /" 의 "/" 와 / pattern / flags 의 "/" 가 충돌 한 것 을 발 견 했 습 니 다. 이런 방식 에서 "/" 문 자 는 특수 문자 가 되 었 습 니 다.
TEST 1：

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;