<div class="content" contenteditable="true" id="content"></div>

     .hashtag {
  color: #2962ff;
  cursor: pointer;
}

body {
  background: black;
  color:white;
}

.content {
  border: 1px solid white;
}

var input = document.querySelector('.content');
input.addEventListener('keydown', function (event) {
  if (event.key === 'Enter' && !event.shiftKey) {
    document.execCommand('insertHTML', false, '<br>');
    event.preventDefault();
  } else {
    var text = this.textContent;
    var formattedText = text.replace(/[\r\n]+/g, '<br>');
    var highlighted = formattedText.replace(/#(\w+)/gm, '<span class="hashtag">#$1</span>');
    this.innerHTML = highlighted;
    placeCaretAtEnd(this);
  }
});

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined" &&
      typeof document.createRange != "undefined"
  ) {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}