2023-04-27

요소(Element)에 따라 가질 수 있는 속성(Attribute)이 다르지만, data 속성(Attribute)는 대부분의 요소(Element)가 가질 수 있어서, 이벤트 발생시에 해당 요소(Element)에 특정 값을 지정 해서 다양하게 응용 할 수 있어서 좋다.
그런데 해당 요소(Element)의 모든 data 속성(Attribute)과 속성값(Arguments)을 가져올 일이 있어서 함수를 하나 만들어 보았다.

<div id="div1" data-a="abc1234" data-a="abc1234" data-bb11cc="abc!@#890=09-8AC" data-c_D_e="!@#~!@@#$#@%#%$#^%&*^(*&)(*_)(+0-=-)aaa"></div>

<div id="div2"></div>

<script>
function get_all_dataAttr(id){
	var aa = $(id).prop('outerHTML').match(/data-([A-Z,a-z,0-9,",~`!@#$%^&*()-=_+]+)/g)
	var r = {}
	for(var k in aa){
		var tmp1 = aa[k].match( /data-([A-Z,a-z,0-9,_]+)/, '')[0].replace('data-', '')
		var tmp2 = aa[k].replace(/data-([A-Z,a-z,0-9,=,_]+)|[\"]/g, '')
		r[tmp1] = tmp2
	}

	return r;
}

var tmp1 = get_all_dataAttr('#div1')
for( var k in tmp1 ){
	$('#div2').append('<b>'+k+'</b>: '+tmp1[k]+'<br>')
}
</script>

정규표현식에 기본적인 특문만 넣어놨고, 한글도 넣어놓질 않아서, 속성값(Arguments)이 좀 더 다채로울 경우에는 data 속성(Attribute)을 인식하는 부분에 조금 더 추가를 해야 할 것이다.