Javascript: How to detect certain characters within a contenteditable div

Question

Edit to add: I first asked about a textarea - I had a feeling it just wasn't possible with a textarea by its nature. Could I do this with a contenteditable div?

Within a contenteditable div, when the user enters %TEST% I would like to add a span with a class around %TEST% to be able to add styling to it.

It runs if %TEST% is in the html, but I need it to run if %TEST% is typed in by the user.

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

using jquery I have:

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

The "Permitted content" of a `` is only Text - no other elements allowed — Jaromanda X, Sep 20 '19 at 02:24
may be this can help https://stackoverflow.com/questions/21574522/contenteditable-put-caret-outside-inserted-span — Nidhin Joseph, Sep 20 '19 at 02:27
I'm not sure if this is what you want by content editable div, but do give this a look and maybe it might be of use for you. https://stackoverflow.com/questions/8956567/how-do-i-make-an-editable-div-look-like-a-text-field — Gosi, Sep 20 '19 at 02:56

score 2 · Answer 1 · answered Sep 20 '19 at 02:24

2

this can't be done with textarea Element

try to simulate textarea element with another element like div or span or pre

answered Sep 20 '19 at 02:24

Ḉớᶑẽr Ħậꞣǐɱ

180
1
6

Casper · Accepted Answer · 2019-09-20T04:06:57.137

The content model for textarea is processed character data therefore element inside textarea will not accepted. However you can use content editable div as alternative solution.

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

Then you can use jQuery to update %TEXT% -> <span class='myTest'>%TEST%</span>, if you want to use Javascript you need to use input event beacuse onchange does not support for contenteditable

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

However contenteditable does not work as a form element therefore you have to use Javascript or jQuery to apply contenteditable in your work.

<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>

Workable sample: https://jsbin.com/zuyemabiwo/1/edit?html,css,js,console,output

Yes this is so close! But, if %TEST% is entered by the user more than once, it only applies the span to the most recent entry — mdhttr248, Sep 20 '19 at 03:48

Javascript: How to detect certain characters within a contenteditable div

2 Answers2