javascript - 現在の textarea 値に html 要素を追加し、生の html として出力する方法

Question

textareaに追加されたユーザーの総コストをスタイルする必要があります。

私はこのコードの断片を持っています:

$("#student_teacher_profile_for_teaching_amount").keyup(function(e) {
    var new_str, price, regex, str;
    regex = /[0-9]+\.[0-9]{1,2}|[0-9]/;
    str = $(this).val();
    console.log(str);
    price = str.match(regex);
    if(price) {
        if( $("#to_teach_ammount").length > 0 ) { 
            $("#to_teach_ammount").html(price[0]);
        } else {
            new_str = str.replace(regex, "<span id='to_teach_ammount'>" + price[0] + "</span>");
            $(this).val(new_str);
        }
        $("#to_teach_total").val(price[0]); #this is and hiddent input filed
    }
});

その結果、次のようになります。

some text before numbers <span id='to_teach_ammount'>2</span>

私のテキストエリアで。

これを生の HTML に変換するにはどうすればよいですか?