Parse HTML | Find Closing Tag | Attributes |
Attributeをパースする
次のコードはあるタグ内のすべてのAttributeのKeyとValue
を列記するスニペットである。
<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>
まずは手始めにシンプルなケースを試してみる。
<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)