Javascript: как обнаружить определенные символы в contenteditable div

Question

Изменить, чтобы добавить: я впервые спросил о текстовой области - у меня было ощущение, что это просто невозможно с текстовой областью по своей природе.Могу ли я сделать это с contenteditable 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)
});

Answer 1

это нельзя сделать с помощью textarea Элемента

попробуйте смоделировать элемент textarea с другим элементом, таким как div или span или до

Answer 2

Модель содержимого для textarea - это обработанные символьные данные , поэтому элемент внутри textarea не будет принят.Однако вы можете использовать редактируемое содержимое 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или 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