How control the position of the "caret navigation/text insertion cursor" inside a text in a editable div?

Question

I have a simple replace function that gets the value input and replace it in the text adding the same value with a span. I'm using it to highlighting the find results, it works fine but the text is an editable div that too have to execute the replace function if typed.

The problem is when the function was executed the caret navigation/text insertion cursor gets back to the start of the text.

There is some manner to control this caret to execute the replace function without changing his position inside of the text?

var txt = document.querySelector("#text");
            txt.addEventListener("input", replace);

        var input = document.querySelector("#input");
            input.addEventListener("input", replace);

        function replace() {

            let re = new RegExp(input.value, 'gi');
            let replace = txt.textContent.replace(re, function (e) {
          
                let r = "<span class='highlight'>" + e + "</span>";
                return r;

            });

            txt.innerHTML = replace;
        }

.highlight {
            background: #00ff90;
        }
        #input { padding:5px;
        }
       #text{
           border:1px solid #ccc; padding:5px;
           margin-top:5px;
           width:300px;
       }

The regex works fine
<input id="input" placeholder="regex" type="text" />
<p>
but when you try to type in the text box the function replace was called and the entry text move to the start, the fucntion has to be called but the text cursos should stay still<p>
    <div id="text" contenteditable="true">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis arcu urna, at volutpat
        justo ultrices eget. Ut facilisis congue scelerisque. Vivamus 
    </div>

https://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function — rprakash, Sep 12 '19 at 07:08
@rprakash tks for the link but this is not what I looking for, this link just shows how to focus on a div, what I need is to the entry text don't move to the start of the text when the function replace is called — Kleber Germano, Sep 12 '19 at 08:04

ankit singh · Answer 1 · 2019-09-12T09:28:55.113

     <input id="input" placeholder="regex" type="text" />
        <div id="text" contenteditable="true">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis arcu urna, at volutpat
            justo ultrices eget. Ut facilisis congue scelerisque. Vivamus 
        </div>
      <style type="text/css">
         .highlight {
                background: #00ff90;
            }
            #input { padding:5px;
            }
           #text{
               border:1px solid #ccc; padding:5px;
               margin-top:5px;
               width:300px;
           }
      </style>
      <script type="text/javascript">
            var txt = document.querySelector("#text");
                txt.addEventListener("input", replace);

            var input = document.querySelector("#input");
                input.addEventListener("input", replace);
            var currentInputPos = input.selectionEnd;

            function replace() {
                let re = new RegExp(input.value, 'gi');
                if(input.selectionStart != currentInputPos) {
                    currentInputPos = input.selectionStart;
                    let replace = txt.textContent.replace(re, function (e) {
                        let r = "<span class='highlight'>" + e + "</span>";
                        return r;
                    });

                    txt.innerHTML = replace;
                }
            }
      </script>

I am using this structure and all things looks fine

tks for answer but this don't work, the change that you made affect the "input" while the div text don't execute the replace function anymore, the issue is that the text is inside an editable div that has to execute the replace function when you type, it works fine but when the function is called the entry text move to the start — Kleber Germano, Sep 12 '19 at 08:14
I have updated the code and all things look fine please try code once , and please let know if you faced any issue — ankit singh, Sep 12 '19 at 09:29
tks again man but I think that you don't get the problem, in your code, the entry text was fixed but the replace highlight stop to work too, I'm using the replace function to add a span that highlighting the found words this function have work too when the text box is typed, here a place that have this exactly behavior https://regex101.com/ in this site a test the regular expression and when a type in the textbox the function that highlight it was executed too — Kleber Germano, Sep 12 '19 at 09:52
run my code again and try to type in the textbox, you'll see that the function replace was executed after typing, this behavior I want to keep — Kleber Germano, Sep 12 '19 at 09:56

How control the position of the "caret navigation/text insertion cursor" inside a text in a editable div?

1 Answers1