JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div id="input" contenteditable="true">Testing test test</div>

CSS

#input {
  padding: 10px;
  background: #ddd;
}

JavaScript

var input = document.getElementById('input');

input.addEventListener('keyup', function(){
	var raw = input.innerText;
  var html = parseMarkdown(raw);
  console.log(html);
});

function parseMarkdown(md) {
	function boldItalicParse(md) {
  	var startIndex = Math.min(md.indexOf('*'), md.indexOf('_'));
    if (startIndex === -1) return md;
    
    if(md[startIndex] === md[startIndex + 1]) {
    	var tag = md[startIndex] + md[startIndex];
    } else {
    	var tag = md[startIndex];
    }
    
    var endIndex = md.indexOf(tag, startIndex + tag.length);
    if (endIndex === -1) return md;
    
    var startHtmlTag = (tag.length == 1) ? '<em>' : '<strong>';
    var endHtmlTag = (tag.length == 1) ? '</em>' : '</strong>';
    md = md.slice(0, startIndex - 1) + startHtmlTag + md.slice(startIndex, endIndex + tag.length - 1) + endHtmlTag + md.slice(endIndex + tag.length);
  }
	var html = md;
  html = boldItalicParse(html);
  
  // Links
  /*var linkRegex = /\[([^\[\]]+)\]\(([a-zA-Z0-9-._~:/?#[\]@!$&'\*\+,;=`.]+)\)/g;
  var linkFunc = (match, text, url) => ('<a href="' + url + '">' + text + '</a>'); // TODO: Update function auto-add http:// if not included
 	html = html.replace(linkRegex, linkFunc);*/
  return html;
}