Riot.jsでタグをエスケープせずに出力する

Riot.jsは、変数としてHTMLタグを含む内容を渡しても、XSS対策として自動でエスケープして表示する仕様です。

しかし、WEBコンテンツを作成していると、こんなことも。

  • 名称をキリの悪い場所でなりゆき改行させるわけにいかない
  • 部分的に強調表示させなければならない

せっかくeachで一気に出力したのに、たった1箇所の改行のために諦めるのか…
いえ、カスタムタグをはさめばなんとかなります。

エスケープせずに出力させるためのRiotタグを作る

こんなふうにメニューを配列にしておき、eachで出力しようとすると
<br>などのタグもそのまま出力されます。悲しすぎる…

list = [
	{
		title: 'home',
		description: ''
	},
	{
		title: 'information',
		description: '&amp;lt;span style="color: red;"&amp;gt;AArt Festa 2018&amp;lt;/span&amp;gt;&amp;lt;br&amp;gt;at AArt Hall on Nov 11'
	},
	{
		title: 'about us',
		description: 'activities &amp;amp; introduction'
	},
	{
		title: 'works',
		description: 'art, design(graphic, WEB, event),&amp;lt;br&amp;gt; branding etc. '
	},
	{
		title: 'contact',
		description: 'contact us from here'
	}
];

そのような場合は、エスケープせずに出力させるためのカスタムタグを通せば解決できます。

unescapeという名前で作ったカスタムタグ

&amp;lt;unescape&amp;gt;
	this.root.innerHTML = this.opts.dataCode;
&amp;lt;/unescape&amp;gt;

このようにunescapeをはさんで表示させます。


&amp;lt;li each="{item in list}"&amp;gt;
	&amp;lt;strong&amp;gt;{item.title}&amp;lt;/strong&amp;gt;
	&amp;lt;small data-is="unescape" data-code="{item.description}"&amp;gt;&amp;lt;/small&amp;gt;
&amp;lt;/li&amp;gt;

動作サンプル

先に登場した、文字色指定や改行タグをはさんだ内容をeachで表示させています。

See the Pen Riot.js tag unescape sample by webdev (@webdev-jp-net) on CodePen.0

関連記事