1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| // ----------------------------
// Récupérer le mot EN COURS DE FRAPPE
$('.write_text_here').on('keyup', function(e){
// mot en cours de frappe
let CaretPos = caretPositionIndex();
//console.log("CaretPos :",CaretPos);
let mots = $(this).html().replace(/(<[^>]*>)/gi, ' ').split(' '); // supprime les balises HTML
mots = mots.filter( function(val){return val !== ''} );
let mots_i = mots.length;
//console.log( mots );
let txt_lg = 0;
let mot_current = '';
let i=0;
while( txt_lg < CaretPos )
{
txt_lg += mots[i].length + 1; // 1 = espace
if( mots.indexOf(i+1)!=-1 && (txt_lg + mots[i+1].length + 1) > CaretPos)
{
mot_current = mots[i-1];
} else {
mot_current = mots[i];
}
i++;
}
// on supprime les caracteres speciaux ( ) et non-alphanumériques
mot_current = mot_current.replace(/(&[^;]*;)|[^a-z0-9]/gi, '');
//console.log("mot en cours de frappe :",mot_current);
$('#motencours').text(mot_current);
});
// ----------------------------
// Position/index du curseur
// source : https://codepen.io/alockwood05/pen/vMpdmZ
function caretPositionIndex()
{
const range = window.getSelection().getRangeAt(0);
const { endContainer, endOffset } = range;
// get contenteditableDiv from our endContainer node
let contenteditableDiv;
const contenteditableSelector = "div[contenteditable]";
switch (endContainer.nodeType) {
case Node.TEXT_NODE:
contenteditableDiv = endContainer.parentElement.closest(contenteditableSelector);
break;
case Node.ELEMENT_NODE:
contenteditableDiv = endContainer.closest(contenteditableSelector);
break;
}
if (!contenteditableDiv) return '';
const countBeforeEnd = countUntilEndContainer(contenteditableDiv, endContainer);
if (countBeforeEnd.error ) return null;
return countBeforeEnd.count + endOffset;
function countUntilEndContainer(
parent,
endNode,
countingState = {count: 0}
) {
for (let node of parent.childNodes) {
if (countingState.done) break;
if (node === endNode) {
countingState.done = true;
return countingState;
}
if (node.nodeType === Node.TEXT_NODE) {
countingState.count += node.length;
} else if (node.nodeType === Node.ELEMENT_NODE) {
countUntilEndContainer(node, endNode, countingState);
} else {
countingState.error = true;
}
}
return countingState;
}
}
// ---------------------------- |
Partager