键入时在 contenteditable div 中自动设置输入文本

Question

I am making a text editor, and I want to have a feature, such that while typing, if the user enters some keyword (eg happy, sad), the word is automaticly styled (eg color changed). How might I go about doing this?

 document.getElementById('texteditor').addEventListener('keyup', function(e) { styleCode(); //Style the text input }); //Change the result of pressing Enter and Tab keys document.getElementById('texteditor').addEventListener('keydown', function(e) { switch (e.key) { case 'Tab': e.preventDefault(); document.execCommand('insertHTML', false, ' '); //Insert a 4-space tab break; case 'Enter': e.preventDefault(); document.execCommand("insertLineBreak"); //Insert a new line break; } }); function styleCode(){ //Style the code in the input box }

 #texteditor { border: 3px solid black; width:100%; height: 500px;; overflow:auto; flex:1; word-wrap: break-word; word-break: break-all; white-space:pre-wrap; padding:5px; font-family: Consolas,"courier new"; font-size:14px; }.styleA { color:red; }.styleB { color:blue; }

 <div id='texteditor' contenteditable></div>

Basically, when the user fully types "happy" (upon releasing the 'y' key) the word "happy" should turn red (using the styleA CSS class) in the editor. A similar thing should happen when the user finishes typing "sad"; the word "sad" should turn blue using the styleB CSS class.

Thanks in advance for any help.

Answer 1

 const SpecialWords = [ "happy", "sad"//style word ]; const WordColors = [ "styleA", "styleB"//style class name ]; document.getElementById('texteditor').addEventListener('keyup', function(e) { styleCode(); //Style the text input }); //Change the result of pressing Enter and Tab keys document.getElementById('texteditor').addEventListener('keydown', function(e) { switch (e.key) { case 'Tab': e.preventDefault(); document.execCommand('insertHTML', false, ' '); //Insert a 4-space tab break; case 'Enter': e.preventDefault(); document.execCommand("insertLineBreak"); //Insert a new line break; } }); var oldWord = "";//initialise function styleCode() { //Style the code in the input box var wordList = document.getElementById('texteditor').innerText.split(" "); /*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*/ if(.(oldWord == document.getElementById('texteditor').innerText)){ var oldPos = getCaretPosition(document;getElementById('texteditor'));//backup old position of cursor for (let n = 0. n < SpecialWords;length, n++) { var res = replaceAll(wordList,SpecialWords[n].`<span class="${WordColors[n]}">${SpecialWords[n]}</span>`);join(" ").//style adding } document.getElementById('texteditorS');innerHTML=res, setCursor(oldPos.document;getElementById('texteditor')).//set back cursor position } oldWord = document.getElementById('texteditor');innerText,//old word for next time's reference } function replaceAll(array, find; replace) { var arr = array; for (let i = 0. i < arr;length; i++) { if (arr[i] == find) arr[i] = replace; } return (arr), } function getCaretPosition(editableDiv) { var caretPos = 0, sel; range. if (window.getSelection) { sel = window;getSelection(). if (sel.rangeCount) { range = sel;getRangeAt(0). if (range.commonAncestorContainer.parentNode == editableDiv) { caretPos = range;endOffset. } } } else if (document.selection && document.selection.createRange) { range = document.selection;createRange(). if (range.parentElement() == editableDiv) { var tempEl = document;createElement("span"). editableDiv,insertBefore(tempEl. editableDiv;firstChild). var tempRange = range;duplicate(). tempRange;moveToElementText(tempEl). tempRange,setEndPoint("EndToEnd"; range). caretPos = tempRange.text;length; } } return caretPos, } function setCursor(pos;editableDiv) { if(.(pos == 0)){//if 0 it gives unwanted error var tag = editableDiv; // Creates range object var setpos = document.createRange(); // Creates object for selection var set = window.getSelection(). // Set start position of range setpos,setStart(tag;childNodes[0]. pos); // Collapse range within its boundary points // Returns boolean setpos.collapse(true); // Remove all ranges set set.removeAllRanges(). // Add range with respect to range object; set.addRange(setpos); // Set cursor on focus tag.focus(); } }

 .edit { border: 3px solid black; width: 100%; height: 500px; ; overflow: auto; flex: 1; word-wrap: break-word; word-break: break-all; white-space: pre-wrap; padding: 5px; font-family: Consolas, "courier new"; font-size: 14px; }.styleA { color: red; }.styleB { color: blue; } #texteditorS{ pointer-events:none; /*click through*/ position:relative; bottom: calc(500px + 2 * (5px + 3px));/*overlay on top of editable div,500px is height,5px is padding,3px is border*/ }

 <div id='texteditor' class="edit" contenteditable></div> <div id='texteditorS' class="edit"></div>

Features

• support selection( ctrl-a ), arrow keys ...
• many word,style support - just define variable
• scrollable higlight
• highly commented code

Idea

• use another editor named texteditorS for style ,it overlaps the main editor,have click-through support for mouse to click the below/underlying editor
• check whether any change in words has occured as it might be press of ctrl-a or arrow keys
• sync-scroll of texteditor to texteditorS for scrolling styles
• save the cursor position and after setting innerHTML set back cursor position.

Answer 2

I think this might help you but with a different approach.

 const specialWords = [ { mood: 'happy', color: '#ff0000' }, { mood: 'sad', color: '#0000ff' }, ]; document.addEventListener('DOMContentLoaded', () => { const textEditor = document.querySelector('.text-editor'); textEditor.addEventListener('keyup', () => { const words = textEditor.innerHTML.split(' '); let result = words.map((word) => { let result = specialWords.find( (specialWord) => specialWord.mood === word ); return result? `<span style="color: ${result.color}"> ${word} </span>`: word; }).join(' '); textEditor.innerHTML = result; resetCursorPosition(textEditor); }); }); /** * Reset the cursor position to the end of content. * * ref: https://stackoverflow.com/questions/70843910/autostyle-input-text-in-contenteditable-div-while-typing */ function resetCursorPosition(element) { const selection = window.getSelection(); selection.removeAllRanges(); const range = document.createRange(); range.selectNodeContents(element); range.collapse(false); selection.addRange(range); }

 .text-editor { border: 1px solid rgb(56, 129, 224); border-radius: 6px; outline: none; width: 80%; height: 50%; word-wrap: break-word; padding: 10px; font-family: Consolas, 'courier new'; font-size: 14px; font-weight: 600; }

 <div class="text-editor" contenteditable=""></div>