JSFiddle - React, Tailwind, and code Playground

HTML

<h4>基本的に、文字列の先頭がシャープで、前後にスペースがあればタグとして認定</h4>

<p>【A】スペースないためタグもなし</p>
<section>  
  <textarea type="text" class="box">こんにちは#良い天気ですね。</textarea>
  <div>▶</div>
  <div class="box">こんにちは#良い天気ですね。</div>  
</section>

<hr>

<p>【B】シャープ直前のスペースがあるのてタグとして認定</p>
<section> 
  <textarea type="text" class="box">こんにちは #良い天気ですね。</textarea>
  <div>▶</div>  
  <div class="box">こんにちは <span>#良い天気ですね。</span></div>
</section>

<hr>

<p>【C】シャープ直前のスペースと文字列直後のスペースの範囲をタグとして認定</p>
<section> 
  <textarea type="text" class="box">こんにちは #良い天気 ですね。</textarea>
  <div>▶</div>  
  <div class="box">こんにちは <span>#良い天気</span> ですね。</div>
</section>

<h4>例外的に、スペースが不要なケースは次の通りです</h4>

<p>【D】シャープ直前が記号か行頭の場合は、シャープ直前のスペースが不要でタグとして認定</p>
<section> 
  <textarea type="text" class="box">こんにちは。#良い天気 ですね。まったく！#その通り です。&#13;#明日 は雨かも。</textarea>
  <div>▶</div>  
  <div class="box">こんにちは。<span>#良い天気</span> ですね。まったく！<span>#その通り</span> です。<br><span>#明日</span> は雨かも。</div>
</section>

<hr>

<p>【E】texarea先頭ならシャープ直前のスペースが不要で、末尾は文字列直後のスペースが不要なので、いずれもタグとして認定</p>
<section> 
  <textarea type="text" class="box">#良い天気 ですね。今日のごはんはどうしましょうか。寒いから #鍋？</textarea>
  <div>▶</div>  
  <div class="box"><span>#良い天気</span> ですね。今日のごはんはどうしましょうか。寒いから <span>#鍋？</span></div>
</section>

CSS

h4 {
  background: #444;
  color: white;
  padding: 5px 15px;
}

section{
  display: flex;
  align-items: center;
  margin: 0px 0 25px 0;
}
textarea::before {
  content: '▶'
  
}
.box {
    border: 1px solid black;
    padding: 5px;
    border-radius: 5px;
    resize: none;
    height: 70px;
    width: 200px;
    white-space: pre-wrap; 
    font-family: unset;
    font-size: 12px;
}
span {
    color: red;
    font-size: 12px;
}