0

My script highlights the keywords but whenever it does, it messes with the string and does random things with the text like reverse it and mix it up.I was wondering if someone could tell me how to unreverse this text or move the cursor to the end of the contenteditable div or at most just fix it for me. I don't want any external libraries just javascript and jquery.

jsfiddle

JS Code:

function UnColor() {
    var elem = document.getElementById("editor");
    var text = elem.textContent;
    elem.innerHTML = text;
}

function Color() {
    UnColor();
    var elem = document.getElementById("editor");
    var code = elem.innerHTML;
    code = code.replace("var","<span style='color:dodgerblue'>var</span>");
    code = code.replace(/"(.*?)"/g,"<span style='color:green'>&quot;$1&quot;</span>");
    code = code.replace(/&lt;(.*?)&gt;/g,"<span style='color:#F90'>&lt;$1&gt;</span>");
    elem.innerHTML = code;
}

setInterval(Color,1000)

Thanks!

  • Could you give us an example of a string you enter and its unintended result? – Artillect Jun 17 '18 at 23:45
  • Implementing real-time syntax highlighting is going to be very complicated. Just moving the cursor to the end of the text won't work if you're modifying existing content. Likewise deleting highlighted words is going to cause you issues with leftover markup too. – fubar Jun 17 '18 at 23:48
  • @Artillect var string = “hey”; –  Jun 18 '18 at 00:08
  • @program.py By copy-pasting that into the textbox, nothing goes wrong. When you type it in, it gets messed up because the cursor is getting moved around when you run the replace. Check out my answer for the proper fix. – Artillect Jun 18 '18 at 00:11
  • @Artillect its a div and I don't know how to configure selectionend and start to work with the div... –  Jun 18 '18 at 00:21
  • @program.py I've added a code snippet to my answer. – Artillect Jun 18 '18 at 00:30

2 Answers2

0

If the issue you're having is the cursor moving around while editing, you can fix that by grabbing the position of the cursor and putting it back at the end of the function. Do that by getting the selectionStart property of your editor textbox and then setting the selectionEnd property to that value after running the replacement.

Check out this answer for more information about selectionStart and selectionEnd.

Here's a simple code snippet from this answer that should get you rolling.

document.getElementById('target').addEventListener('input', function (e) {
  var target = e.target,
      position = target.selectionStart; // Capture initial position
  
  target.value = target.value.replace(/\s/g, '');  // This triggers the cursor to move.
  
  target.selectionEnd = position;    // Set the cursor back to the initial position.
});
<p>The method <code>.replace()</code> will move the cursor's position, but you won't notice this.</p>
<input type="text" id="target" />
Artillect
  • 239
  • 1
  • 13
  • I configured this to work with a div and .innerHTML but it seems to reverse the text now. –  Jun 18 '18 at 01:02
0

This issue is coming as the textContent of editor id being equated to its innerHTML. So change the variable name like the JS code I was written here :

function UnColor() {
    var elem = document.getElementById("editor");
    var text = elem.textContent;
    var elem2;
    elem2.innerHTML = text;
}

function Color() {
    UnColor();
    var elem = document.getElementById("editor");
    var code = elem.innerHTML;
    code = code.replace("var","<span style='color:dodgerblue'>var</span>");
    code = code.replace(/"(.*?)"/g,"<span style='color:green'>&quot;$1&quot;</span>");
    code = code.replace(/&lt;(.*?)&gt;/g,"<span style='color:#F90'>&lt;$1&gt;</span>");
    var elem2;
    elem2.innerHTML = code;
}

setInterval(Color,1000)
Shridevi Kupluchar
  • 11
  • 4