Highlights

contententeditable text highlight

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">
<div class="saisac"></div>
<form>
    <fieldset>
        <label class="checkbox"><input id="check-noms" type="checkbox"/> Surligner les <span class="label label-info">NOMS</span></label>
        <label class="checkbox"><input id="check-prenoms" type="checkbox"/> Surligner les <span class="label label-info">Prénoms</span></label>
  </fieldset>
</form>

CSS

/** TODO 
* #1. Interactive <div> with contenteditable attribut
* #2. Resizable {resize: both;overflow: auto;}
* #3. Style the <div> (on hover, on focus...)
* #4. LocalStorage on load and close
* #5. Bootstrap styles and button "Afficher les valeurs numériques"
* 6. Replace and remove : http://techbrij.com/javascript-backreferences-string-replace-regex et http://gskinner.com/RegExr/
* /(([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.))(([A-Z\-\'À-Ý]{3,50})[\n\r|\n|\r]?([A-Z\-\'\ À-Ý]{3,50}))\b/g
*
*/

body {
    padding: 20px;
}
.saisac {
	min-height: 100px;
	border: 1px solid silver;
    padding: 4px 6px;
    color: #555;
    background: #EEE;
    border-radius : 4px;
    margin-bottom: 10px;
}

.saisac:hover {
	border: 1px solid grey;
}

.saisac:focus {
    border-color : rgba(82, 168, 236, 0.8);
    box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
    outline : 0 none;
}

.label {margin: 0 1px;}

JavaScript

// Interactive <div> with contenteditable attribut
$('.saisac').attr({contenteditable: 'true'});

// Bouton Prénoms
$('#check-prenoms').click(function() {
    $('.saisac-prenoms').toggleClass('label label-info');
});

// Bouton Noms
$('#check-noms').click(function() {
    $('.saisac-noms').toggleClass('label label-info');
});

// sauvegarde et nettoyage du contenu lors du clic dans la liste
$(".saisac").click(function() {
    $('.saisac-prenoms').removeClass('label label-info');
    $('.saisac-noms').removeClass('label label-info');
    $('#check-prenoms').attr('checked', false);
    $('#check-noms').attr('checked', false);
});

// sauvegarde du contenu lors du clic hors de la liste
$(".saisac").blur(function() {
    localStorage.setItem('highlightData',this.innerHTML);
    var str = $('.saisac').html();
    str=str.replace(/(<span class="saisac-([^"]+)">([^<]+)<\/span>)/ig,'$3');
    str=str.replace(/(([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.))(([A-Z\-\'À-Ý]{3,50})[\n\r|\n|\r]?([A-Z\-\'\ À-Ý]{3,50}))\b/g,'<span class=\"saisac-prenoms\">$1</span><span class=\"saisac-noms\">$5</span>');
    $('.saisac').html(str);  
});

//récupération du contenu au chargement de page
if (localStorage.getItem('highlightData')) {
    var str = localStorage.getItem('highlightData');
    str=str.replace(/(<span class="saisac-([^"]+)">([^<]+)<\/span>)/ig,'$3');
    str=str.replace(/(([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.)?([A-Z\-\'À-Ý][a-zà-ÿ]+.))(([A-Z\-\'À-Ý]{3,50})[\n\r|\n|\r]?([A-Z\-\'\ À-Ý]{3,50}))\b/g,'<span class=\"saisac-prenoms\">$1</span><span class=\"saisac-noms\">$5</span>');
    $('.saisac').html(str);
}