[Jquery] 선택자(Selector)에 특수기호 넣기

차량 센서 모니터링 웹플랫폼을 개발하면서 테이블 td의 id를 차량의 코드에따라 달라지게 자동화를 해놨다.

이 id를 이용해서 검색을 하거나 for문으로 데이터 일부만 갱신하게 만들어놨다.

td의 id와 json의 코드를 비교해서 같을 때 해당 데이터를 갱신해주는 방식이다.

 

예를 들면

차량 코드 : Tractor1
td id : Tractor1
td.id.innerHtml = json.데이터;

와 같은 방식으로 데이터를 갱신한다.

지금까지는 차량 코드가 영문과 숫자로 조합되었지만 고객 요청으로 차량 코드번호 앞에  '[number]'를 붙여줬다.

 

ex: [3]Tractor2

** [number]는 db에서 들어오는 index 값.

 

요청대로 테이블에 [number]를 추가했다.

 

그런데 Interval로 설정한 데이터 갱신이 되지 않는다.

개발자툴을 들어가서 보니 에러 발생.

 

갑자기 속성이 정의되지 않았다고 나온다.

console.log를 찍어보니 아래와 같이 [0]으로 선택자의 데이터가 들어와야 하는데 들어오지 않고 있다.

내가 무엇을 빠뜨렸나? 고민하다가

변화를 준 부분인 '[number]'에서 문제가 발생했으니 거기서 원인을 찾아보기로 했다.

'혹시 제이쿼리 선택자에는 특수문자가 들어가면 안 되는건가?'

 

찾아보니 그렇단다..!

구글링한 블로그에서는 친절하게도 해결 방법까지 제시해줬다.

특수문자 앞에 \\를 붙이면 된단다.

 

modelNo = modelNo.split("[").join("\\[");
modelNo = modelNo.split("]").join("\\]");

 

그래서 '[' 와 ']' 앞에 '\\'를 붙였다.

 

결과는 아래[0]와 같이 잘 들어온다.