Ways to correct inverted text in live syntax highlighting using javascript

Question

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to the end of the contenteditable div, or simply correcting the problem altogether using only JavaScript and jQuery.

Visit my code snippet on jsfiddle

Below is the JavaScript 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)

Any help would be greatly appreciated! Thank you.

javascript html css text innerhtml

Answer 1

Answer №1

If you're experiencing the issue of the cursor moving while editing, there is a solution to fix it. Simply retrieve the cursor's position using the selectionStart property of your editor textbox and then set the selectionEnd property to that value after performing the replacement function.

For more detailed information on selectionStart and selectionEnd, refer to this answer.

Below is a sample code snippet taken from this answer to help you implement this fix:

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

Answer 2

If you're experiencing the issue of the cursor moving while editing, there is a solution to fix it. Simply retrieve the cursor's position using the selectionStart property of your editor textbox and then set the selectionEnd property to that value after performing the replacement function.

For more detailed information on selectionStart and selectionEnd, refer to this answer.

Below is a sample code snippet taken from this answer to help you implement this fix:

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

Answer 3

Answer №2

The error occurs because the textContent of the editor id is being assigned to its innerHTML. To fix this issue, simply change the variable name in the JavaScript code provided below:

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)

Answer 4

The error occurs because the textContent of the editor id is being assigned to its innerHTML. To fix this issue, simply change the variable name in the JavaScript code provided below:

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)

Ways to correct inverted text in live syntax highlighting using javascript

Answer №1

Answer №2

Similar questions

What is the jQuery equivalent for converting this JavaScript code?

Sleek descending motion effect

Margin not being applied to last element in parent - any ideas why?

Creating scalable React applications

Using jQuery to combine a variable with the image source in order to replace the image attribute

Exploring the width of Bootstrap 5 Tab Pane content

Adjust the height setting of the React-Highcharts viewport

Use Meteor to retrieve the value from the initial collection in order to locate the value in the second collection

Restore the initial content of the div element

Retrieve the file from Amazon S3 and download it

Concealing other items in an array on selecting one item in React Native- A step-by-step guide

The issue with the callback function not being triggered within a self-repeating loop

Proper Sequence of Bootstrap Header Configuration

Is there a way in JQuery to apply the CSS of one element to another selected element?

Submitting incomplete values from a Jquery form to a MySQL database

Collapsed Bootstrap navigation bar on mobile devices

Leveraging global variables within Vuex state management strategy

Ways to implement div on hover in my table's td cells

An improved method for fetching data from the server at regular intervals of x minutes

Upon hitting submit, the form remains unresponsive