JSFiddle - React, Tailwind, and code Playground

by Peter Korgaard

HTML

<div id="app">
	<h3>
		Here are some text rendered with v-html and filters.
	</h3>
	<p v-html="message | toHTML"></p>
	<h3>
		And here are some text rendered with mustache interpolations and 	filters to show, that the filter actually works.
	</h3>
	<p>
		{{ message | toHTML }}
	</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

JavaScript

Vue.filter('toHTML', function (value) {
		if(typeof value === 'undefined') {
				return;
		};

		var formatingValues = [
			{ "from": "[br]", "to": "<br />" },
			{ "from": "[b]", "to": "<b>" },
			{ "from": "[/b]", "to": "</b>" },
			{ "from": "[i]", "to": "<i>" },
			{ "from": "[/i]", "to": "</i>" },
			{ "from": "[sub]", "to": "<sub>" },
			{ "from": "[/sub]", "to": "</sub>" },
			{ "from": "[sup]", "to": "<sup>" },
			{ "from": "[/sup]", "to": "</sup>" },
		];

	  for(var i = 0; i < formatingValues.length; i++ ) {
	    	value = value.split(formatingValues[i].from).join(formatingValues[i].to);
	  	}

	  	return value;
	});


new Vue({
	el: '#app',
	data: {
		message: "Here is a text followed by breaks.[br][br][b]And here is some more bold text[/b]"
	}

});