CODEWITHSUNDEEP
javascriptjqueryhtml
dav0r
dav0r

Reputation: 113

Determining a character of a sentence when clicked on

On a random break I found myself wondering if it would be possible to use jQuery to determine a single character within a sentence when it is clicked on.

For example: This

When the user clicks on first h, jQuery would return this to me.

The only way I could think of doing this would be to wrap each character within the sentence in a span with a class of its letter such as the following example:

<span class="clickable T">T</span>
<span class="clickable h">h</span>
<span class="clickable i">i</span>
<span class="clickable s">s</span>

Followed by a $('.clickable').click(function()) that would return its second class.

My question is: is this the most efficient way to do this?

Upvotes: 4

Views: 935

Answers (4)

Dimag Kharab
Dimag Kharab

Reputation: 4519

Well wrapping all text dyanamically with span tag , it is possible what you were looking for

JS

$(function(){

        var lengthText  =   $('#singlecharacter').text().length;

        var textValue = $('#singlecharacter').text();

        var textArray =  textValue.split('');

        var newText = new Array();


        for (var i = lengthText - 1; i >= 0; i--) {

            newText[i]  =   "<span class='sp'>"+textArray[i]+"</span>";
        };

        $('#singlecharacter').html(newText);

        $('.sp').click(function()
        {
            alert($(this).text());
        });


        });

HTML

<div id='singlecharacter'>THIS</div>

DEMO JSFIDDLE

Upvotes: 0

Dropout
Dropout

Reputation: 13866

You can do it with this script

$('.clickable').on('click', function(){
    var html = $(this).text(); // if you want the text inside the span
    var index = $(this).index(); // if you want the position among siblings

    var classes = $(this).attr('class').split(" ");

    var secondClass = getSecondClass(classes);
});

function getSecondClass(classArray){
    if(classArray.length<2){
        return null;
    }else{
        return classArray[1];
    } 
}

I've also included the html and index variables if you want to do something else with the clicked element.

Basically you split the classes of the element by spaces and then check if the array has less than two elements, in that case it returns null, otherwise it returns the second element.

jsFiddle

Upvotes: 0

nateyolles
nateyolles

Reputation: 1921

Obviously wrapping every single letter of the document in span tags is not efficient.

I was able to spin something up that works in Chrome at least. Basically, when you click on a letter, it then triggers a double clicks which selects the word. We get the selection which actually gives us the text of the entire target element. From that, we get the letter that was clicked. We remove the selection and do what we want with the letter.

Fiddle here

$(function(){
    $(document).click(function(e){
        var target = e.target;
        $(target).dblclick();    
    }).dblclick(function(){
        var selection,
            node,
           text,
           start,
           end,
           letter;

        if (window.getSelection) {
            selection = document.getSelection();
            node = selection.anchorNode;

            if (node.nodeType === 3) {
                text = node.data;
                start = selection.baseOffset;
                end = selection.extentOffet;

                if (!isNaN(start)) {
                    letter = text.substr(start, 1);
                }
            }
            window.getSelection().removeAllRanges()
        } else if(document.selection) {
            //continue work here
        }

        if (letter) {
            alert(letter);
        }

    });
});

Upvotes: 1

Aarmora
Aarmora

Reputation: 1153

You could return the innerHTML as well with:

$('.clickable').on('click', function(){
  alert($(this).html());
});

As for a more efficient way to do it...maybe try this: in Javascript/jQuery, how to check a specific part of a string and determine if it is a whitespace or letter?

Upvotes: 0

Related Questions