JQuery - Highlight the selected words.

[CrisTany]

Am o problema de care nu pot trece, am un div cu contenteditable setat la true, full screen. Ce vreau eu este asta: cand scri anumite cuvinte alese de mine, de exemplu IF sau ELSE sa se faca culoarea rosu de exemplu. Ca sa intelegeti, ganditiva in Notepad++ cand tastezi if,else, while etc..

Am incercat sa fac un plugin, folosind selectorul contains si .on("keyup") dar odata ce scriu cuvantul care trebuie colorat, intreg divul se face la fel, orice scriu dupa.

Aveti ceva idei ?

[H3xoR]

Arunc? o privire aici: Ace#nav=about

Dac? vrei tu s?-l faci de la 0 e cam greu, ideea de baz? este urm?toarea:

-adaugi o func?ie la event-ul "oninput" la acel div care are setat contenteditable.

-în func?ie memorezi pozi?ia caret-ului (caut? pe google despre window.getSelection()).

-faci o func?ie sau folose?ti un regex pentru a face split la text-ul din acel div (element.textContent || element.innerText). Split-ul const? în separarea cuvintelor de caractere specifice. Exemplu: Am urm?torul text: { int *x = new int[20]; }. Split-ul trebuie s?-mi returneze urm?toarele token-uri: {int, ,*,x, ,=, ,new, ,int,[,20,],;}.

-ini?ializezi o variabil? cu text-ul gol pentru a memora output-ul final c?tre acel div. Exemplu: var result = "";.

-parcurgi fiecare token din rezultatul split-ului ?i verifici care este keyword. În cazul în care este, faci append la result cu "<div style='color: blue;'>" + keyword + "</div>;". În cazul în care nu este, faci append la result cu "<div style='color: black;'>" + keyword + "</div>;".

-asociezi variabila result la proprietatea innerHTML a div-ului.

-restaurezi pozi?ia caret-ului unde era ini?ial.

Sper c? te-am ajutat, baft?!