Bootstrapの折り畳みのhrefに特殊文字を使うにはエスケープもしくは置き換える必要がある

https://cccabinet.jpn.org/bootstrap4/components/collapse

上に書いてあるような折り畳み機能を仮にeach do内で使うとすると思わぬ動作不良が起きました。

本のシリーズ名をボタンにして、そこを押すとそのシリーズの本が出てくるというものを作っていたのですが、本のシリーズ名に ”.” が入ると、押しても本が出てきません。

結論を言うと、href等の指定をエスケープした文字にしておけば解決します。

<% escape_comic = comic.sub(/\./,"") %>

<a data-toggle="collapse" href="#collapse<%= escape_comic %>" role="button" aria-expanded="false" aria-controls="collapse<%= escape_comic %>">

ボタン部分のerbです。

comicというハッシュのキーに本のシリーズ名が出力されます。

それをまず一行目で”.”を消してあげています。

（もし他の特殊文字のせいで同じ症状が起こるかもしれませんが、今の所発見できていないので、とりあえずはこのドットの処理だけにしています）

あとはhrefやaria-controlsの指定をescape_comicを使って指定するだけです。

コンテンツ部分も同様に処理します。

実際に表示されるシリーズ名はドットを含めた文字になるので、見た目的には何ら問題はありません。