できちゃったシリーズ第二弾。やっていいんだろうか。
仕様の話
BASEの商品説明、商品説明カスタムではHTMLタグが使えない。書き込んだとしても全部エスケープ処理がされるので、タグは文字列となってそのまま表示される。
つまり、
<a href="">test</a>こう書くと
<a href="">test</a>
こう出力されて
<a href="">test</a>結果、こう表示される。
そういうアレで無効化されてる。問い合わせフォームとかを自作するときのセキュリティでも似たような感じのやつをするんで、珍しいことではない。
これをどうにかできないかという話。
どうにかできる
やれる。
jsが使えるので書き換えてしまえばいい。
<p class="description">{ItemDetail}</p>こんな感じで商品説明を出力してるとする。
$(function(){
var unescapeHtml = function(target) {
if (typeof target !== 'string') return target;
var patterns = {
'<' : '<',
'>' : '>',
'&' : '&',
'"' : '"',
''' : '\'',
'`' : '`'
};
return target.replace(/&(lt|gt|amp|quot|#x27|#x60);/g, function(match) {
return patterns[match];
});
};
var htmlStr = $('p.description').html();
var result = unescapeHtml(htmlStr);
$('p.description').html(result);
})こう。
参考を探してたらコピペで済んでしまった。
HTML文字列をアンエスケープ | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
JavaScriptの逆引きリファレンス「HTML文字列をアンエスケープ」を掲載しているページです。
shanabrian.com
これを使えば商品紹介で太字とか色文字とか装飾ができるようになる。jsを.html()でなく.text()にすれば改行への<br>の自動挿入を無視できるから、htmlをフル活用してもっとリッチな感じにできる。
注意点として、あとはjsの処理だから反映に多少の遅延が発生しがちなんで、ページの表示にアニメーションを付けるとかして遅延対策をするのがいい。
それに、<meta>のdescription周りにエスケープの内容が並ぶ。だから商品説明よりは商品説明カスタムでやるのがいいかもしれない。
コメント