JQuery Text highlight

contenteditable html5 text highlight with jquery

by toubia95

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="https://raw.github.com/andris9/jStorage/master/jstorage.js"></script>
<div id="highlight" class="well" contenteditable="true">
    <p></p></div>
<button id="show" class="btn btn-primary pull-right" type="button">Surligner</button>
<div id="highlighted" class="well"></div>

CSS

/* contenteditable html5 text highlight with jquery
 * // 1. Zone editable stylée
 * 2. Détection des chiffres
 * 3. Local Storage (http://www.jstorage.info/)
 * 4. Regex : http://www.gskinner.com/RegExr/
 * http://www.jquery4u.com/syntax/jquery-basic-regex-selector-examples/
* http://stackoverflow.com/questions/275160/regex-for-names
* http://www.regexlib.com/RETester.aspx?AspxAutoDetectCookieSupport=1
* ([A-Z][a-zàéèêëîïôöôö]+ )*([A-Z]{3,50})
* \d+
* /(heure[., ]|heures[., ]|soir[., ]|matin[., ]|mil[., ]|mille[., ]|cen[ts][., ]|un[., ]|deux[., ]|trois[., ]|quatre[., ]|cinq[., ]|six[., ]|sept[., ]|huit[., ]|neuf[., ]|dix[., ]|onze[., ]|douze[., ]|treize[., ]|quatorze[., ]|quinze[., ]|seize[., ]|vingt[., ]|trente[., ]|quarante[., ]|cinquante[., ]|soixante[., ]|janvier[., ]|f[ée]vrier[., ]|mars[., ]|avril[., ]|mai[., ]|juin[., ]|juillet[., ]|ao[uû]t[., ]|septembre[., ]|octobre[., ]|novembre[., ]|d[eé]cembre[., ]|ans[., ])/gi
* http://www.miakinen.net/vrac/nombres2
*
* http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify
 */

body {padding: 20px;}
#highlight,#highlighted {
    border: 1px solid #AAA;
}

#highlighted {
    margin-top: 70px;
}
.numbers {
    color:blue;
    font-weight:bold;
}

JavaScript

$('#highlight').spellcheck = 'true';

// sauvegarde du contenu lors du clic hors de la liste
$("#highlight").blur(function() {
    localStorage.setItem('highlightData',this.innerHTML);
});

//récupération du contenu au chargement de page
if (localStorage.getItem('highlightData')) {
    highlight.innerHTML = localStorage.getItem('highlightData');
}

// Fonction regex
var regex = /(heure[., ]|heures[., ]|soir[., ]|matin[., ]|mil[., ]|mille[., ]|cen[ts][., ]|un[., ]|deux[., ]|trois[., ]|quatre[., ]|cinq[., ]|six[., ]|sept[., ]|huit[., ]|neuf[., ]|dix[., ]|onze[., ]|douze[., ]|treize[., ]|quatorze[., ]|quinze[., ]|seize[., ]|vingt[., ]|trente[., ]|quarante[., ]|cinquante[., ]|soixante[., ]|janvier[., ]|f[ée]vrier[., ]|mars[., ]|avril[., ]|mai[., ]|juin[., ]|juillet[., ]|ao[uû]t[., ]|septembre[., ]|octobre[., ]|novembre[., ]|d[eé]cembre[., ]| ans[., ])/gi, replacement = '<span class=\"numbers\">$1</span>';
function replaceText(i,el) {
    if (el.nodeType === 3) {
        if (regex.test(el.data)) {
            $(el).replaceWith(el.data.replace(regex, replacement));
        }
    } else {
        $(el).contents().each( replaceText );
    }
}

$('#show').click(function() {
    
    $('body').each( replaceText );
});