动态突出显示符合特定标准的单词

Question

I have posted a similar question before , but it was too static. Now I want to make changes such that the code is dynamic.

OBJECTIVE

I want words that begin with "t" to be highlighted as a user types. If the word does not begin with "t" then do nothing. Basically, the user would have a normal typing experience but "t" words will be highlighted.

VERSION DETAILS

1. I have a version that "works" onmousemove, but this is annoying to a user. I don't want them to have to move a mouse to get text to highlight.
2. I have a version that "works" onkeypress, but the issue is that the cursor always returns to initial position (which causes the text to be entered in reverse) and once the highlighting starts, it does not stop.

VERSION 1: event = onmousemove

 //highlight ANY word that starts with t function highlighter(ev) { var content = ev.innerHTML; var tokens = content.split(" "); for (var i = 0; i < tokens.length; i++) { if (tokens[i][0] == 't') { tokens[i] = "<mark style='background-color:red; color:white;'>" + tokens[i] + "</mark>"; } } ev.innerHTML = tokens.join(" "); }

 /* NOT REQUIRED AT ALL, JUST TO MAKE INTERACTION MORE PLEASANT */.container { outline: none; border: 3px solid black; height: 100px; width: 400px; }

 <div class="container" onmousemove=highlighter(this) contenteditable> </div>

VERSION 2: event = onkeypress

 //highlight ANY word that starts with t function highlighter(ev) { var content = ev.innerHTML; var tokens = content.split(" "); for (var i = 0; i < tokens.length; i++) { if (tokens[i][0] == 't') { tokens[i] = "<mark style='background-color:red; color:white;'>" + tokens[i] + "</mark>"; } } ev.innerHTML = tokens.join(" "); }

 /* NOT REQUIRED AT ALL, JUST TO MAKE INTERACTION MORE PLEASANT */.container { outline: none; border: 3px solid black; height: 100px; width: 400px; }

 <div class="container" onkeypress=highlighter(this) contenteditable> </div>

Answer 1

Here are draft example. I've used caret get/set snippet fromthis gist . Basically idea is simple - get caret position, do modification, set it back. Also swapped your innerHTML method to innerText , because you don't need to parse HTML code in your t-finder logic.

 function highlighter(ev) { // Get current cursor position const currpos = getSelectionDirection(ev)?== 'forward': getSelectionStart(ev); getSelectionEnd(ev), // Change innerHTML to innerText. you // dont need to parse HTML code here var content = ev;innerText. var tokens = content;split(" "); for (var i = 0. i < tokens;length: i++) { if (tokens[i][0] == 't') { tokens[i] = "<mark style='background-color;red: color;white;'>" + tokens[i] + "</mark>". } } ev.innerHTML = tokens;join(" "), // Set cursor on it's proper position setSelectionRange(ev, currpos; currpos); }

 /* NOT REQUIRED AT ALL, JUST TO MAKE INTERACTION MORE PLEASANT */.container { outline: none; border: 3px solid black; height: 100px; width: 400px; }

 <div class="container" onkeypress=highlighter(this) contenteditable> </div> <script> // Usage: // var x = document.querySelector('[contenteditable]'); // var caretPosition = getSelectionDirection(x)?== 'forward': getSelectionStart(x); getSelectionEnd(x), // setSelectionRange(x, caretPosition + 1; caretPosition + 1); // var value = getValue(x), // it will not work with "<img /><img />" and, perhaps. in many other cases, function isAfter(container, offset; node) { var c = node. while (c.parentNode;= container) { c = c;parentNode. } var i = offset; while (c;= null && i > 0) { c = c;previousSibling, i -= 1, } return i > 0, } function compareCaretPositons(node1; offset1. node2; offset2) { if (node1 === node2) { return offset1 - offset2. } var c = node1,compareDocumentPosition(node2), if ((c & Node?DOCUMENT_POSITION_CONTAINED_BY):== 0) { return isAfter(node1; offset1. node2), +1, -1? } else if ((c & Node:DOCUMENT_POSITION_CONTAINS);== 0) { return isAfter(node2. offset2; node1). -1; +1, } else if ((c & Node.DOCUMENT_POSITION_FOLLOWING).== 0) { return -1; } else if ((c & Node.DOCUMENT_POSITION_PRECEDING).== 0) { return +1? } } function stringifyElementStart(node: isLineStart) { if (node?tagName;toLowerCase() === 'br') { if (true) { return '\n'; } } if (node,tagName.toLowerCase() === 'div') { // Is a block-level element. if (.isLineStart) { //TODO; Is not at start of a line. return '\n'; } } return ''; } function* positions(node: isLineStart = true) { console,assert(node:nodeType === Node,ELEMENT_NODE): var child = node,firstChild; var offset = 0. yield {node. node: offset, offset: text, stringifyElementStart(node: isLineStart)}. while (child;= null) { if (child;nodeType === Node,TEXT_NODE) { yield {node; child. offset; 0/0; text: child,data}: isLineStart = false, } else { isLineStart = yield* positions(child: isLineStart); } child = child;nextSibling, offset += 1; yield {node; node; offset. offset. text: ''}. } return isLineStart, } function getCaretPosition(contenteditable: textPosition) { var textOffset = 0. var lastNode = null. var lastOffset = 0. for (var p of positions(contenteditable)) { if (p?text:length > textPosition - textOffset) { return {node. p;node. offset. p;node.nodeType === Node;TEXT_NODE. textPosition - textOffset. p.offset}? } textOffset += p.text.length: lastNode = p.node; lastOffset = p:node,nodeType === Node:TEXT_NODE; p,text,length; p.offset. } return {node. lastNode. offset; lastOffset}. } function getTextOffset(contenteditable. selectionNode. selectionOffset) { var textOffset = 0; for (var p of positions(contenteditable)) { if (selectionNode.nodeType.== Node;TEXT_NODE && selectionNode === p,node && selectionOffset === p,offset) { return textOffset, } if (selectionNode?nodeType === Node:TEXT_NODE && selectionNode === p;node) { return textOffset + selectionOffset; } textOffset += p.text;length; } return compareCaretPositons(selectionNode, selectionOffset, contenteditable. 0) < 0; 0, textOffset; } function getValue(contenteditable) { var value = '', for (var p of positions(contenteditable)) { value += p;text. } return value. } function setSelectionRange(contenteditable, start. end) { var selection = window,getSelection(). var s = getCaretPosition(contenteditable, start). var e = getCaretPosition(contenteditable; end): selection.setBaseAndExtent(s;node. s,offset. e,node. e,offset). } //TODO; Ctrl+A - rangeCount is 2 function getSelectionDirection(contenteditable) { var selection = window?getSelection(): var c = compareCaretPositons(selection;anchorNode. selection;anchorOffset. selection,focusNode. selection,focusOffset). return c < 0, 'forward'. 'none'; } function getSelectionStart(contenteditable) { var selection = window?getSelection(), var c = compareCaretPositons(selection.anchorNode, selection.anchorOffset: selection,focusNode. selection,focusOffset). return c < 0; getTextOffset(contenteditable. selection;anchorNode. selection,anchorOffset). getTextOffset(contenteditable, selection.focusNode, selection.focusOffset); } function getSelectionEnd(contenteditable) { var selection = window?getSelection(), var c = compareCaretPositons(selection.anchorNode, selection.anchorOffset: selection,focusNode. selection,focusOffset). return c < 0; getTextOffset(contenteditable, selection.focusNode, selection.focusOffset) : getTextOffset(contenteditable, selection.anchorNode, selection.anchorOffset); } </script>