2022/09/21 - TIL

정규식 callback

이전에 정규식에서 본인 자신을 받는 방법으로 $&를 사용하는 것을 보았다. 오늘 페어프로그래밍에서 특정 조건으로 검색을 하고 검색한 것을 대상으로 새로운 값을 추출하려고 하였다

(예시)

const try1 = Str1.replace(new RegExp(reg1), $&,replace(new Reg(reg2), str2)

$&를 본인이라고 인식한 것이 본인이 아닌 문자였는지 replace를 쓰면 원하는 값이 나오지 않았다.

결론은 앞에서 미리 변수를 만들고(선언하지 않더라도) 뒤에서 이용하는 값을 터치하는 방법을 찾았다.

const highOrderFunction = (highOrderStr) =>{
	function callback(callackStr){
		return match.replace(new RegExp(''+keyword+'',flag), '$&:this is')
	}
	return str(highOrderStr).replaceAll(new RegExp('(?<=<span>).{1,}(?=</span>)'), callback)
}

데이터에서 getter사용하기

데이터를 키별로 상세하게 분류하여 사용하는 경우에 데이터의 키값을 주어 사용하면 편리하다.

const object = {
	object1 :{
		key1:true,
		get getkey1(){
			return key1
		}
	},
	object2 :{
		key2:false,
		get getkey2(){
			return key2
		}
	},
	get isValid(){return this.object1.key1 && this.object2.key2}
}

다음과같이 키값과 getter 함수를 적절하게 혼합하면 값들을 저장하고 필요할 때 꺼내 사용하는 것이 가능하다

iframe과 parent 통신하기

window에서 iframe으로 통신을 하기 위해서 window.querySelector(’.iframe-class’).contentWindow를 사용하였다. console로그를 사용하면 마치 값이 있는 것처럼 값이 뜨는 경우가 있었는데 값이 들어 가는 척만하지 막상 iframe으로 접근해서 값을 해결해보면 값을 직접적으로 저장을 하지 않는다

그렇다면 어떤식으로 값을 보내는게 좋을까? 두 주소의 URI가 일치하다면 이를 해결하기 상당히 쉽다 바로 localStorage key에 값을 입력하고 iframe에서 값을 읽는 방법이다!