=raw
<h3>Attributeをパースする</h3>
=/raw

-----------------------------------------------
次のコードはあるタグ内のすべてのAttributeのKeyとValue
を列記するスニペットである。

=pre
<script>
function printAllAttributes(el){
	for(let i=0;i<el.attributes.length;i++){
		let name=el.attributes[i].name;
		let value=el.attributes[i].value;
		if(value===""){value="(EMPTY)";}
		console.log(name,",",value);
	}
};

const el_test=document.getElementById("test");
printAllAttributes(el_test);
</script>
=/pre

-----------------------------------------------
まずは手始めにシンプルなケースを試してみる。

<span id=test aaa=bbb あああ＝いいい>

以下のようになる。

------------------------|
id, test
aaa, bbb
あああ, いいい
------------------------|

-----------------------------------------------
checkedを入れてみた。

<span id=test aaa=bbb checked>

以下のようになる。
------------------------|
id, test
aaa, bbb
checked, (EMPTY)
------------------------|

Valueが宣言されていない場合、Valueは、(EMPTY) string
になる。

-----------------------------------------------
このタグでは、

<span id=test a " ' ` ~ ! @ # $
% ^ & * ( ) - _ = + { }
[ ] / | ; : ? / , . <>

以下にようなattributesになる
------------------------|
id , test
a , (EMPTY)
" , (EMPTY)
' , (EMPTY)
` , (EMPTY)
~ , (EMPTY)
! , (EMPTY)
@ , (EMPTY)
# , (EMPTY)
$ , (EMPTY)
% , (EMPTY)
^ , (EMPTY)
& , (EMPTY)
* , (EMPTY)
( , (EMPTY)
) , (EMPTY)
- , (EMPTY)
_ , +
{ , (EMPTY)
} , (EMPTY)
[ , (EMPTY)
] , (EMPTY)
| , (EMPTY)
; , (EMPTY)
: , (EMPTY)
? , (EMPTY)
, , (EMPTY)
. , (EMPTY)
< , (EMPTY)
------------------------|

> 以外の文字なら、なんでもKeyになれるようである。
= が _  と + をKey-Valueペアにしているところに注目。

改行とスペースは同じWhiteSpaceとして取り扱われている。

-----------------------------------------------
= を３つ並べたらどうなるか？

<span id=test ===>

------------------------|
id, test
= , =
------------------------|

最初の=がKeyになり、最後の=がValueとなり、
真ん中の=がKeyとValueをペアにする。

-----------------------------------------------
Keyがquoteされたらどうなるのか？

<span id=test "aaa"="bbb">

以下のようになる。

------------------------|
id, test
"aaa", bbb
------------------------|

"aaa" は、両脇のquoteがKeyの名前の一部になっている。

-----------------------------------------------
以下のように、Keyと=の間にWhitespace、=とValueの間に
Whitespaceがあっても問題なく、Key-Valueペアができる。

<span id=test aaa    	
		   =      		
		   
		   
		   "bbb">

結果:
------------------------|
id, test
aaa, bbb
------------------------|

-----------------------------------------------
以下のように、=を最初の文字に持った文字列がKeyになれてしまう。

<span id=test =ttt>

結果:
------------------------|
id, test
=ttt, (EMPTY)
------------------------|

-----------------------------------------------
""の後にスペースがなく、次の文字列がある場合でもOK

<span id=test aaa="bbb"ccc>

------------------------|
id, test
aaa, bbb
ccc, (EMPTY)
------------------------|

-----------------------------------------------