js实现输入高亮@和#后面的内容
效果如下：支持连续输入
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 20px;}.container {width: 100%;max-width: 800px;background: white;border-radius: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);overflow: hidden;}.content {padding: 30px;}.editor-container {position: relative;margin-bottom: 30px;}#editor {min-height: 200px;border: 2px solid #e0e0e0;border-radius: 8px;padding: 15px;font-size: 16px;line-height: 1.6;outline: none;transition: border-color 0.3s;background: white;overflow-y: auto;}#editor:focus {border-color: #3498db;box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);}.highlight {background-color: #fff9c4;border-radius: 3px;padding: 0 2px;color: #e74c3c;font-weight: 500;}</style>
</head><body><div class="container"><div class="content"><div class="editor-container"><div id="editor" contenteditable="true" placeholder="输入内容..."></div></div></div></div><script>const editor = document.getElementById('editor');function saveCursorPosition() {const selection = window.getSelection();if (selection.rangeCount === 0) return null;const range = selection.getRangeAt(0);const preCaretRange = range.cloneRange();preCaretRange.selectNodeContents(editor);preCaretRange.setEnd(range.endContainer, range.endOffset);return {startOffset: preCaretRange.toString().length,range: range};}function restoreCursorPosition(startOffset) {const selection = window.getSelection();selection.removeAllRanges();let charCount = 0;let nodeStack = [editor];let node, foundStart = false;let range = document.createRange();range.setStart(editor, 0);range.collapse(true);while (!foundStart && (node = nodeStack.pop())) {if (node.nodeType === Node.TEXT_NODE) {const nextCharCount = charCount + node.length;if (!foundStart && startOffset >= charCount && startOffset <= nextCharCount) {range.setStart(node, startOffset - charCount);foundStart = true;}charCount = nextCharCount} else {const children = node.childNodes;for (let i = children.length - 1; i >= 0; i--) {nodeStack.push(children[i])}}}if (foundStart) {range.collapse(true);selection.addRange(range);}}function applyHighlighting() {const cursorPosition = saveCursorPosition();const text = editor.textContent;const tags = [];editor.innerHTML = text.replace(/([@#][^\s]+)/g, (match) => {tags.push(match);return `<span class="highlight">${match}</span>`;});// 恢复光标位置if (cursorPosition) {restoreCursorPosition(cursorPosition.startOffset);}}let isComposing = false;editor.addEventListener('compositionstart', () => {isComposing = true;});editor.addEventListener('compositionend', () => {isComposing = false;applyHighlighting();});editor.addEventListener('input', () => {if (!isComposing) {applyHighlighting();}});applyHighlighting();</script>
</body></html>