1

I want a contenteditable div to call a function which constantly reviews its contents and replaces patterns within it (think Markdown). My attempts resulted in the cursor constantly positioning itself to the start of the div with the text being inserted in backwards order. Additionally, even if a (regex style replacement) pattern matches, replacements with HTML tags (such as bold) ends up not terminating, leaving the rest of the div bold. A simple code sample duplicating these issues follows:

Jsfiddle here (fixed)

<body>
    <div id = "content" contenteditable = "true" oninput = "reformat()"></div>
</body>

// JS //

var content = document.getElementById("content");
function reformat()
{
    content.innerHTML = content.innerHTML.replace(/dogs/g, "<b>cat</b>");
}

Basically, I want it to replace "dogs" with "cat" in bold and nothing else abnormal as the user is typing. My last resort is to convert non-contenteditable divs to act as contenteditable ones to avoid issues, but it involves reinventing the wheel for something that should be seemingly trivial. How should I approach this?

I have visited other posts such as replace string in contenteditable div but the cursor is still stuck and I would like my answer in vanilla JS if possible. If there's a platform other than HTML/JS/CSS (Visual Studio, Python tkinter, etc) that this is more suited towards, please let me know.

Curly_Brackets
  • 21
  • 4
  • maybe it is already answered here: https://stackoverflow.com/a/40198673/8463484 – Gulielmus Oct 13 '20 at 20:41
  • The root cause here is an editable element's behaviour to reset the cursor position when inner content changes. – Gershom Maes Oct 13 '20 at 20:41
  • @Gulielmus Interesting, but it uses textarea. – Curly_Brackets Oct 13 '20 at 20:45
  • Additionally, backspacing the "b" in "=b=" still leaves behind a "==" instead of it converting to a "+". – Curly_Brackets Oct 13 '20 at 20:48
  • https://stackoverflow.com/questions/41884969/replacing-content-in-contenteditable-box-while-typing – imvain2 Oct 13 '20 at 20:50
  • @imvain2 It's close but it seems to have some caret/cursor issues. I modified the js with one replace: replace(/dogs/g, `catsssssss`) and I typed "dogs", but the caret is in the middle of chars and I can't move the caret to the end of the line. [Jsfiddle Link](https://jsfiddle.net/ju16x0em/) – Curly_Brackets Oct 13 '20 at 21:09

1 Answers1

0

Try this, its around but i didn't found better solution. I replacing event with setinterval so i dont need to distrub to content, second one i check if match, if so i replace the match string and return the caret to end of string by lastchild

<html>
<body>
    <body>
        <div onkeypress="reformat()" id="content" contenteditable="true"></div>
    </body>
    
<script>  
    var content = document.getElementById("content");
  function reformat()
    {
        var dogs = /dogs/g;
       var content1=content.innerHTML+" ";
var found = content1.match(dogs);
        if(found){
            content.innerHTML = content1.replace(/dogs/g, "<b>cat</b>");
    var range = document.createRange()
    var sel = window.getSelection()  
    range.setStart(content.lastChild, 0)
    range.collapse(true)   
    sel.removeAllRanges()
    sel.addRange(range)
        } 
    }
</script>
  </html>
  <style>
      #content{
          border: 1px solid black;
      }
  </style>
Moti Salamon
  • 152
  • 8