ホームページ > 記事 > ウェブフロントエンド > テキスト エディターでマルチカラー テキストの強調表示を実装するにはどうすればよいですか?
テキスト エディターでの多色のテキストの強調表示
テキストエリアまたはテキスト入力要素で多色のテキストの強調表示を導入するには、主に次のことを詳しく調べる必要があります。 JavaScript と CSS の領域。ただし、これらの要素は本質的にさまざまな色でのテキストの強調表示をサポートしていないことに注意することが重要です。
構文の強調表示機能については、以下を利用する必要があります:
編集可能な要素: 既存の HTML 要素で contenteditable 要素または contenteditable 属性を使用して、ユーザーがテキスト コンテンツを編集できるようにします。
JavaScript:
CSS:
例 (JavaScript および CSS の場合):
<code class="js">// Here's the JavaScript code const keywords = ["var", "if", "else", "for"]; // Your list of keywords const textarea = document.getElementById("textarea"); textarea.addEventListener("input", (e) => { const start = textarea.selectionStart; const end = textarea.selectionEnd; const text = textarea.value.substring(start, end); if (keywords.includes(text)) { // Apply highlighting to the selected text textarea.value = textarea.value.substring(0, start) + "<span class='highlight'>" + text + "</span>" + textarea.value.substring(end); } });</code>
<code class="css">/* CSS for syntax highlighting*/ .highlight { color: red; font-weight: bold; }</code>
編集可能ファイルの操作要素 (テキストエリアやテキスト入力とは対照的に) を使用すると、多色のテキストの強調表示をより柔軟に適用できます。
以上がテキスト エディターでマルチカラー テキストの強調表示を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。