Javascript：如何检测 contenteditable div 中的某些字符答案

【问题标题】：Javascript: How to detect certain characters within a contenteditable divJavascript：如何检测 contenteditable div 中的某些字符
【发布时间】：2019-09-20 02:17:04
【问题描述】：

编辑添加：我首先询问了 textarea - 我有一种感觉，就其性质而言，textarea 是不可能的。我可以用可内容编辑的 div 来做到这一点吗？

在 contenteditable div 中，当用户输入 %TEST% 时，我想添加一个包含 %TEST% 周围的类的跨度，以便能够为其添加样式。

如果 %TEST% 在 html 中，它会运行，但如果用户输入了 %TEST%，我需要它运行。

<div contenteditable="true" class="myEntry">We're happy you're here, %TEST%. Let's get started.</div>

使用 jquery 我有：

$('.myEntry).each(function () {
    var original = $(this).text();
    var new_version = original.split('%TEST%').join('<span class="stylizeMe">Test</span>');
    $(this).html(new_version)
});

【问题讨论】：

您不能在<textarea> 中包含<span>（或任何元素）
<textarea> 的“允许内容”仅为文本 - 不允许其他元素
这就是我害怕的：/
也许这可以帮助stackoverflow.com/questions/21574522/…
你用这个textarea发布一些数据吗？

标签： javascript jquery html css

【解决方案1】：

textarea 元素无法做到这一点

尝试用 div 或 span 或 pre

等其他元素模拟 textarea 元素

【讨论】：

【解决方案2】：

textarea 的内容模型是processed character data，因此textarea 内的元素将不被接受。但是您可以使用content editable div 作为替代解决方案。

<div id="editable" contenteditable="true"></div>

然后你可以使用jQuery更新%TEXT% -> <span class='myTest'>%TEST%</span>，如果你想使用Javascript你需要使用input事件因为onchange不支持contenteditable

$('body').on('blur', '[contenteditable]', function() {
   $(this).html(function () {
    return $(this).text().replace(/%TEST%/g, "<span class='myTest'>%TEST%</span>"); 
  });
});

但是contenteditable 不能用作表单元素，因此您必须使用Javascript or jQuery 在您的工作中应用contenteditable。

<script>
        document.getElementById("textarea").value = document.getElementById("content").innerHTML;
</script>

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

<form>
    <textarea id="textarea" style="display:none"></textarea>
</form>

可行样本：https://jsbin.com/zuyemabiwo/1/edit?html,css,js,console,output

【讨论】：

是的，这太接近了！但是，如果用户多次输入 %TEST%，它只会将 span 应用于最近的条目