1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }

1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }.edit {
146  border: 3px solid black;
147  width: 100%;
148  height: 500px;
149  ;
150  overflow: auto;
151  flex: 1;
152  word-wrap: break-word;
153  word-break: break-all;
154  white-space: pre-wrap;
155  padding: 5px;
156  font-family: Consolas, "courier new";
157  font-size: 14px;
158}
159
160.styleA {
161  color: red;
162}
163
164.styleB {
165  color: blue;
166}
167#texteditorS{
168pointer-events:none;  /*click through*/
169position:relative;
170bottom: calc(500px + 2 * (5px + 3px));/*overlay on top of editable div,500px is height,5px is padding,3px is border*/
171
172}

1document.getElementById('texteditor').addEventListener('keyup', function(e) {
2  styleCode(); //Style the text input
3});
4
5//Change the result of pressing Enter and Tab keys
6document.getElementById('texteditor').addEventListener('keydown', function(e) {
7  switch (e.key) {
8            case 'Tab':
9                e.preventDefault();
10                document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
11                break;
12
13            case 'Enter':
14                e.preventDefault();
15                document.execCommand("insertLineBreak"); //Insert a new line
16                break;
17        }
18});
19
20function styleCode(){
21  //Style the code in the input box
22}#texteditor {
23  border: 3px solid black;
24  width:100%;
25  height: 500px;;
26  overflow:auto;
27  flex:1;
28    word-wrap: break-word;
29  word-break: break-all;
30    white-space:pre-wrap;
31  padding:5px;
32  font-family: Consolas,"courier new";
33    font-size:14px;
34}
35
36.styleA {
37  color:red;
38}
39
40.styleB {
41  color:blue;
42}<div id='texteditor' contenteditable></div>const SpecialWords = [
43  "happy",
44  "sad"//style word
45];
46const WordColors = [
47  "styleA",
48  "styleB"//style class name
49];
50document.getElementById('texteditor').addEventListener('keyup', function(e) {
51  styleCode(); //Style the text input
52  
53});
54
55//Change the result of pressing Enter and Tab keys
56document.getElementById('texteditor').addEventListener('keydown', function(e) {
57  switch (e.key) {
58    case 'Tab':
59      e.preventDefault();
60      document.execCommand('insertHTML', false, '    '); //Insert a 4-space tab
61      break;
62
63    case 'Enter':
64      e.preventDefault();
65      document.execCommand("insertLineBreak"); //Insert a new line
66      break;
67  }
68});
69var oldWord = "";//initialise
70function styleCode() {
71
72  //Style the code in the input box
73  var wordList = document.getElementById('texteditor').innerText.split(" ");
74/*if old word is same as now then it means we have presed arrow key or caps or so,it do not wan't to style now as no change*/
75  if(!(oldWord == document.getElementById('texteditor').innerText)){
76var oldPos = getCaretPosition(document.getElementById('texteditor'));//backup old position of cursor
77for (let n = 0; n < SpecialWords.length; n++) {
78    var res = replaceAll(wordList,SpecialWords[n],`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
79}
80document.getElementById('texteditorS').innerHTML=res;
81setCursor(oldPos,document.getElementById('texteditor'));//set back cursor position
82}
83
84  oldWord = document.getElementById('texteditor').innerText;//old word for next time's reference
85
86}
87
88function replaceAll(array, find, replace) {
89var arr = array;
90for (let i = 0; i < arr.length; i++) {
91    if (arr[i] == find)
92        arr[i] = replace;
93}
94  return (arr);
95}
96function getCaretPosition(editableDiv) {
97  var caretPos = 0,
98    sel, range;
99  if (window.getSelection) {
100    sel = window.getSelection();
101    if (sel.rangeCount) {
102      range = sel.getRangeAt(0);
103      if (range.commonAncestorContainer.parentNode == editableDiv) {
104        caretPos = range.endOffset;
105      }
106    }
107  } else if (document.selection && document.selection.createRange) {
108    range = document.selection.createRange();
109    if (range.parentElement() == editableDiv) {
110      var tempEl = document.createElement("span");
111      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
112      var tempRange = range.duplicate();
113      tempRange.moveToElementText(tempEl);
114      tempRange.setEndPoint("EndToEnd", range);
115      caretPos = tempRange.text.length;
116    }
117  }
118  return caretPos;
119}
120function setCursor(pos,editableDiv) {
121if(!(pos == 0)){//if 0 it gives unwanted error
122            var tag = editableDiv;
123              
124            // Creates range object
125            var setpos = document.createRange();
126              
127            // Creates object for selection
128            var set = window.getSelection();
129              
130            // Set start position of range
131            setpos.setStart(tag.childNodes[0], pos);
132              
133            // Collapse range within its boundary points
134            // Returns boolean
135            setpos.collapse(true);
136              
137            // Remove all ranges set
138            set.removeAllRanges();
139            // Add range with respect to range object.
140            set.addRange(setpos);
141              
142            // Set cursor on focus
143            tag.focus();
144            }
145        }.edit {
146  border: 3px solid black;
147  width: 100%;
148  height: 500px;
149  ;
150  overflow: auto;
151  flex: 1;
152  word-wrap: break-word;
153  word-break: break-all;
154  white-space: pre-wrap;
155  padding: 5px;
156  font-family: Consolas, "courier new";
157  font-size: 14px;
158}
159
160.styleA {
161  color: red;
162}
163
164.styleB {
165  color: blue;
166}
167#texteditorS{
168pointer-events:none;  /*click through*/
169position:relative;
170bottom: calc(500px + 2 * (5px + 3px));/*overlay on top of editable div,500px is height,5px is padding,3px is border*/
171
172}<div id='texteditor'  class="edit" contenteditable></div>
173<div id='texteditorS' class="edit"></div>

1<h1 id="text">Escreva seu texto abaixo</h1>
2
3<div id="container">
4    <input type="text" id="type">
5</div>
6<main>
7    <ul>
8        <li class="buttons">
9            <button id="button1">A</button>
10        </li>
11        <li class="buttons">
12            <button id="button2">a</button>
13        </li>
14        <li class="buttons">
15            <button id="button3">B</button>
16        </li>
17        <li class="buttons">
18            <button id="button4">I</button>
19        </li>
20    </ul>
21</main>
22>  let text = document.getElementById("text")
23>         let input = document.getElementById("type")
24>         let button1 = document.getElementById("button1")
25>         let button2 = document.getElementById("button2")
26>         let button3 = document.getElementById("button3")
27>         let button4 = document.getElementById("button4")
28>         let value1 = document.getElementById("type").value
29> 
30> 
31>         button1.onclick = uppercase
32>         button2.onclick = lowercase
33>         button3.onclick = bold
34>         button4.onclick = italic
35> 
36>         function uppercase(){
37>             text.innerHTML = value1.toUpperCase()
38>         }
39> 
40>         function lowercase (){
41>             text.innerText = input.value.toLowerCase()
42>         }
43> 
44>         function bold(){
45>             text.innerText = input.value.style.fontWeight="bold";
46>         }
47let text = document.getElementById("text")
48let input = document.getElementById("type")
49let button1 = document.getElementById("button1")
50let button2 = document.getElementById("button2")
51let button3 = document.getElementById("button3")
52let button4 = document.getElementById("button4")
53
54
55button1.onclick = uppercase
56button2.onclick = lowercase
57button3.onclick = bold
58//button4.onclick = italic
59
60function uppercase() {
61let value1 = document.getElementById("type").value
62  text.innerHTML = value1.toUpperCase()
63}
64
65function lowercase() {
66  text.innerText = input.value.toLowerCase()
67}
68
69function bold() {
70  text.innerHTML = '<b>'+input.value+'</b>'
71}

1<h1 id="text">Escreva seu texto abaixo</h1>
2
3<div id="container">
4    <input type="text" id="type">
5</div>
6<main>
7    <ul>
8        <li class="buttons">
9            <button id="button1">A</button>
10        </li>
11        <li class="buttons">
12            <button id="button2">a</button>
13        </li>
14        <li class="buttons">
15            <button id="button3">B</button>
16        </li>
17        <li class="buttons">
18            <button id="button4">I</button>
19        </li>
20    </ul>
21</main>
22>  let text = document.getElementById("text")
23>         let input = document.getElementById("type")
24>         let button1 = document.getElementById("button1")
25>         let button2 = document.getElementById("button2")
26>         let button3 = document.getElementById("button3")
27>         let button4 = document.getElementById("button4")
28>         let value1 = document.getElementById("type").value
29> 
30> 
31>         button1.onclick = uppercase
32>         button2.onclick = lowercase
33>         button3.onclick = bold
34>         button4.onclick = italic
35> 
36>         function uppercase(){
37>             text.innerHTML = value1.toUpperCase()
38>         }
39> 
40>         function lowercase (){
41>             text.innerText = input.value.toLowerCase()
42>         }
43> 
44>         function bold(){
45>             text.innerText = input.value.style.fontWeight="bold";
46>         }
47let text = document.getElementById("text")
48let input = document.getElementById("type")
49let button1 = document.getElementById("button1")
50let button2 = document.getElementById("button2")
51let button3 = document.getElementById("button3")
52let button4 = document.getElementById("button4")
53
54
55button1.onclick = uppercase
56button2.onclick = lowercase
57button3.onclick = bold
58//button4.onclick = italic
59
60function uppercase() {
61let value1 = document.getElementById("type").value
62  text.innerHTML = value1.toUpperCase()
63}
64
65function lowercase() {
66  text.innerText = input.value.toLowerCase()
67}
68
69function bold() {
70  text.innerHTML = '<b>'+input.value+'</b>'
71}<p id="text">Escreva seu texto abaixo</p>
72
73<div id="container">
74  <input type="text" id="type">
75</div>
76<main>
77  <ul>
78    <li class="buttons">
79      <button id="button1">A</button>
80    </li>
81    <li class="buttons">
82      <button id="button2">a</button>
83    </li>
84    <li class="buttons">
85      <button id="button3">B</button>
86    </li>
87    <li class="buttons">
88      <button id="button4">I</button>
89    </li>
90  </ul>
91</main>