如何将 html 元素添加到当前 textarea 值，并将其输出为原始 html答案

【问题标题】：How to add html element to the current textarea value, and output it as raw html如何将 html 元素添加到当前 textarea 值，并将其输出为原始 html
【发布时间】：2013-10-05 06:44:46
【问题描述】：

我需要为 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？

【问题讨论】：

您正在尝试为文本区域内的部分文本设置样式？我不相信这是可能的。此外，如果您将 html 标记放置在文本区域中，它们将显示为 html 代码。它们不会被重新定义为 html。
这是不可能的，因为 html 无法在文本区域内呈现。
textarea 元素表示元素原始值的多行纯文本编辑控件。你需要找到另一种方法来做你想做的事。
改用 contentEditable DIV。
关于 SO 有许多类似/相同的问题。其中之一是stackoverflow.com/questions/3282505/…

标签： javascript html

【解决方案1】：

这对于只接受纯文本的普通<textarea> 元素是不可能的。您将不得不使用（富文本）插件，例如使用 jQuery。看看这里：http://www.strangeplanet.fr/work/jquery-highlighttextarea/

【讨论】：

【解决方案2】：

to_teach_total 不应是文本区域。相反，它应该是一个需要 html 的元素

然后使用$(this).html(new_str) 设置html

这个 html() 方法也可以传递一个函数，该函数可以将旧 html 作为参数并返回一个新字符串以设置为新 html

【讨论】：