IE 11 LTR character 이슈

LTR(Left-To-Right)란?

LTR이란 left-to-right의 약어로 단어가 왼쪽에서 오른쪽으로 써진 다는 의미의 mark character입니다. 한글, 영어, 러시아어 등이 대표적인 예입니다. 반대로는 RTL(right-to-left)가 있는데 대표적으로 아랍어가 있습니다.

 

IE 11에서 LTR mark character 관련 이슈

함수의 파라미터로 연,월,일을 문자열로 받아 두개의 날짜 객체를 생성하고 둘을 비교하는 코드가 필요했습니다. 그런데 moment객체나 date객체 어떤걸 사용해도 Invalid Date라는 에러를 뱉으면 IE 11에서만 객체가 생성이 안됐습니다(크롬, 크롬 모바일, 모바일 웹, 앱 전부 정상). 

코드는 대충 아래와 같은 느낌이었습니다.

function dateCompare(date1, date2) {
	let startDt = $moment(date1); //Invalid Date
    let endDt = $moment(date2); // Invalid Date
    let startDt = new Date(date1); //Invalid Date
    let endDt = new Date(date2); // Invalid Date
    
    let diff = startDt.diff(endDt); // NaN return
    let diff2 = startDt.getTime() - endDt.getTime() // NaN return
},
function emitDateResult(dateObj){
	return dateObj.year + ('0'+dateObj.month).slice(-2) + ('0'+dateObj.day).slice(-2);
}

버그는 예를 들면 emitDateResult에서 ‎return값을 2021‎0‎8‎0‎6‎으로 예상했는데 202186으로 나왔습니다. 마치 dateObj.month나 dateObj.day앞에 뭔가 더 있는것처럼... 그래서 찾아보니 IE11에서는 문자열 앞에 LTR mark character를 추가해준다는 것을 알게되었습니다...

 

해결

그래서 스택오버플로우를 찾아봤는데 저와 같은 현상을 겪는 동지(?)를 찾았고 해결방법은 LTR마크캐릭터를 공백으로 replace 해줬습니다.

function emitDateResult(dateObj){
	return (dateObj.year + ('0'+dateObj.month).slice(-2) + ('0'+dateObj.day).slice(-2)).replace(/[^ -~]/g,'');
}

뒤에 /g 옵션은 문자열 전체(globally)를 검색한다는 의미입니다... IE에서는 replaceAll도 안되기때문에,,