현재 내가 일을 하면서 쓰고 있는 편집기는 Aptana와 EmEditor이다.
이중 주력은 코드 어시스트가 지원되는 Aptana지만 EmEditor도 빠른 정규식 처리나 몇가지 쓸만한 기능 때문에 가끔 사용중이다.

이 둘은 모두 대부분의 택스트 편집기가 그러하듯이 찾기나 바꾸기시 정규식을 지원한다.

그런데 최근 jQuery를 사용하면서 이런 생각을 해보았다.

찾기시 정규식이 아닌 jQuery 셀렉터를 사용할 수는 없을까?

HTML 편집시 정규식을 이용하면 왠만한 찾기 바꾸기는 가능했었다.
그런데 아래와 같은 경우는 어떻게 하면 좋을까?

<table>
<tr>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
</tr>
<tr>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
</tr>
<tr>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
<td>어쩌고</td>
</tr>
</table>

위와 같은 소스에서 각 tr의 첫번째 td 태그만을 th로 바꾸어야만 한다.
이 경우 정규식을 사용하면 대충 아래와 같은 식을 세워서 골라내면 된다.

찾기 : <tr>\r\n\t<td>(.*?)<\/td>
바꾸기 : <tr>\r\n\t<th>\1<\/th>

그런데 이렇게 말고 jQuery Selector를 이용하면 어떨까?

$('tr').find('td:first').replaceWith(function(){return '<th>'+$(this).text()+'</th>';});

대충 이러한 식이 될 것이다. (이와 비슷한 식으로 td를 th로 바꾸어주는 jQuery 소스)

실제로 이러한 식을 이용해서 html 파일의 편집이 가능하며 내 경우는 파이어폭스의 확장 프로그램인 파이어버그의 콘솔에서 이를 실제로 적용해 사용하고 있다.

ㅇㅇ? 하시는 분들을 위해서 조금 더 간단하게 설명하자면

  1. 편집하고자 하는 원본소스가 있는 페이지로 들어가 파이어버그를 켜고
  2. 콘솔에 위의 식을 박아 넣고 실행하여 소스를 변경시키고
  3. 변경된 소스를 파이어버그에서 복사해 다시 원본소스에 적용하는 방식

이것이 가능한 이유는 파이어버그에서는 서버에서 가져온 소스가 아닌 현재 브라우저에서 랜더링된 소스를 표시하기 때문이다.
즉 자바스크립트 등으로 인해 DOM이나 Attribute가 변화할 시 이것도 그대로 반영되어 표시된다는 것.

문제는
이러한 편집방법을 파이어버그를 이용하는 것이 아닌 실제 편집기에서 사용할 수 없겠는가 하는것이다.

실제 편집기에서 위의 방식이 작동가능하다면 Replace in Files에서와 같은 기능처럼 특정 폴더 하단의 모든 소스를 한방에 변화시키는 것도 가능할 텐데.. 이럼 참 편리할 텐데..

혹시 있을까 해서 찾아보았으나 아직까지는 찾을 수 없었다.

현재 내가 알고 있는 가능한 방법은…
Aptana에서 Ruby로 소스를 짜서 번들로 만들어서 쓰거나
EmEditor에서 이를 메크로로 만드는 것…

즉 이것이 편집기에서 네이티브  작동하는 방식은 아니라는 것.

물론 특수한 경우겠지만 있으면 참 좋겠네~ㅋ

이 글의 관련글

Tags:

2 Comments

    1. 네..ㅋ
      이 방법을 지금도 계속 고민은 하고 있는데.. 말씀하신 부분도 함 생각해보아야겠습니다.

      비슷한 계통에 계신분이 오랜만에 들려주셔서 반갑습니다~^^

Leave a Reply

Your email address will not be published. Required fields are marked *