React

by John Allan

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function linkifyTextString(inputText) {
  if ((!inputText) || (typeof (inputText) != 'string')) return false;
  //URLs starting with http://, https://, or ftp://
  var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; //ignore jslint
  var match;
  var find = '<br />';
  var addSpace = new RegExp(find, 'g');
  inputText = inputText.replace(addSpace, ' <br /> ');
  var replacedText = inputText;
  while ((match = replacePattern1.exec(inputText)) != null) {
    var matchText = match[0];
    var lengthOfMatch = matchText.length;
    var indexToReplacement = replacePattern1.lastIndex - lengthOfMatch;

    var preMatch = inputText.charAt(indexToReplacement - 1) || '';
    var postMatch = inputText.charAt(indexToReplacement + lengthOfMatch) || '';

    if ((preMatch !== '>' || postMatch !== '<') && (preMatch !== '"' || postMatch !== '"') && (preMatch !== '\'' || postMatch !== '\'')) {
      var beforeReplaceText = inputText.slice(0, indexToReplacement);
      var afterReplaceText = inputText.slice(indexToReplacement + lengthOfMatch, inputText.length);
      replacedText = beforeReplaceText + '<a href=\"' + matchText + '\" target=\"_blank\">' + matchText + '</a>' + afterReplaceText;
      inputText = replacedText;
    }
  }

  //URLs starting with www. (without // before it, or it'd re-link the ones done above)
  var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
    var replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank" rel="noopener">$2</a>');

  //Change email addresses to mailto:: links
  var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
  var replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

  return replacedText;
}