Question

I was wondering wether it was possible to know exactly where in the dom the text that is selected is?

I am currently using the following function to know what text is being selected, but I want to be able to return its position as well

Selector = {};
Selector.getSelected = function(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;
}

and I can also find what the parent element is with the following:

function getSelectionStart(){
    var node = document.getSelection().anchorNode;
    var startNode = (node.nodeName == "#text" ? node.parentNode : node);
    return startNode;
}

but is there a way for me to know with js what the character position it has depending on where I click?

Answer 1

I ended up dynamically addressing each character as a seperate span tag and it’s index.

This is what is currently doing what I want.

$('#codeinput ul' || '#selectednote li .char').click( function() {
    if ($('#selectednote li *').size() < 2)
    {
    $('#codeinput h1').animate({opacity: '0.6'}, 200);
    inputtype = 1;
    inputnode = '#codeinput #selectednote li'
    console.log('focus is shifted to ' + inputnode)
    $('#codeinput #selectednote li').animate({opacity: '0.9'}, 200);
    }
    else
    {
    $('#selectednote li .char').click(function() {
    k = 0   
    $('#codeinput h1').animate({opacity: '0.6'}, 200);
    var char = $(this).attr('id')
    inputnode = char
    $('#caret').insertAfter('#selectednote li span:eq(' + (parseInt(inputnode) + parseInt(k)) + ')');
    inputtype = 2;
    console.log('clicked on ' + inputnode)
    $('#codeinput #selectednote li').animate({opacity: '0.9'}, 200);
    });
    };
});




function sendinputtodom(input,type) {
    $(".char").each(function(){ $(this).attr('id', $(this).index())});
if (inputtype == 2) {
    var from = '#selectednote li span:eq(' + (parseInt(inputnode) + parseInt(k)) + ')';
    console.log(from)
    $('<span class="char">' + input + '</span>').insertAfter(from);

    k = k + 1;

    $('#caret').insertAfter('#selectednote li span:eq(' + (parseInt(inputnode) + parseInt(k)) + ')');


    if($('#afterinput').size() < 1)
    {

    }
}
else
{
   $('<span class="char">' + input + '</span>').appendTo(inputnode);
}

$(".char").each(function(){ $(this).attr('id', $(this).index())});

};

It isn’t elegant, clean or light but it gets the job done.