HTML Attribute Parser

HTML Element의 Attribute를 전부 뽑아 각각을 Object로 만들어 주는 코드입니다.
HTML Parser가 Element의 Attributes를 뽑는것과 비슷하다고 생각하시면 됩니다.

getAttribute 와의 차이점은, 제가 만든 정규식은 Element의 모든 Attributes를 Attribute와 value로 가져오는 것이죠.
무슨말인지 모르시겠죠?

<img src=”a.jpg” width=”100″ height=”100″ alt=”bla..” align=”right”>

에서

src=”a.jpg” width=”100″ height=”100″ alt=”bla..” align=”right”

만 뽑아서 각각 object로 만들어 줍니다. 즉

[“height=”100″”, “height”, “100”]

같은 형태로 뽑아주는거지요.

여기까지 끈기있게 읽으신분들은 “근데 이거 만들어서 어따 쓸려고..” 라는 의문점이 드실거에요.(의문점이 드시면 당신은 천재..!!?? 혹은 동변상련을 느끼시는 분들..??)
이걸 왜 만들었냐하면, Wiki에 쓸 Formatter를 만드는데 거기에 쓸려고 만든 정규식입니다.
(Formatter 같은거 만들때 꽤나 유용하게 쓰일 정규식입니다.)

wiki 혹은 punBB같은 Formatter가 있는것들은 내부적으로 문법이 있습니다. 문법따라 여러가지 옵션들이 붙는데 이 옵션을 뽑아내서 처리하는 부분이 필요하죠.
바로 이 문제때문에 만들게 된 것입니다.
무슨말이신지 잘 모르시겠죠?? 그러실것 같아서 아래 예제를 준비했습니다.

[[image(src = “a.jpg” width  = 100% height=”50″ alt=”bla..!! bla… ;(” align=”center”)]]

와 같은 문법이 있다고 한다면, 각각의 Attribute을 뽑아서 선행처리(Attribute가 옳바른 것인가? 쉽게 말하면 onclick 같은게 있는가..검사하는 등등)해야 하고,
Attribute속성에 맞게 다시 수정을 해줘야 합니다.(width, height같은것은 css로 만드는 등등)

이런것에 아주 유용하게 쓰일 정규식입니다.

쓸대없이 두서가 길었네요.
Formatter에서 [[image(~~~)]] 는 제거하여 순수하게 Attribute만 남기겠습니다.
그렇게 되면

src = “a.jpg” width  = 100% height=”50″ alt=”bla..!! bla… ;(” align=”center”

만 남겠죠, 이걸가지고 예제를 하겠습니다.

var getAttributes = function(attributes){
var param_regExp = /(\w+)\s*=\s*((?:\”|\’)[\w\s.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?(?:\”|\’)|[\w.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?)(?:\s+?|$)/i;
nextMatch = 0;

while(attributes){
if(nextMatch < attributes.length){
attribute = param_regExp.exec(attributes.substr(nextMatch, attributes.length));
nextMatch = nextMatch + attribute[0].length;

document.write(attribute[0] + ” : ” + attribute[1] + ” => ” + attribute[2] + “<br />”);

if(nextMatch >= attributes.length){
return;
}
}
}
}

getAttributes(“src  = \”a.jpg\” width  = 100% height=\”50\” alt=\”bla..!! bla… ;(\” align=\”center\””);

뛰워쓰기( ), 쌍따움표(“), 홀따움표(‘), 세키콜론(;), 괄호({([) 등등 특수문자처리도 됩니다.

이 몇줄 안되는 코드를 짜기위해 몇시간을 소비한것인지..ㅠ,.ㅠ
검색해보면 쉽게 나올지도 모른다는 생각이…왜 이제서야 든걸까요..ㅠ,.ㅠ

ps> 지금 시간이 새벽 1시 11분이군요.. 왠지 오타도 많을것 같고, 말도 많이 틀릴것 같은데..
그러려니하고 봐주세요;;

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중