单击时确定句子的字符

Determining a character of a sentence when clicked on

本文关键字：字符 句子 单击      更新时间：2023-09-26

在一次随机休息中，我发现自己想知道是否可以使用 jQuery 来确定单击句子中的单个字符。

例如： This

当用户点击第一个h时，jQuery会把这个返回给我。

我能想到的唯一方法是将句子中的每个字符包装在一个跨度中，并带有其字母类，例如以下示例：

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

其次是将返回其第二类的$('.clickable').click(function())。

我的问题是：这是最有效的方法吗？

显然，将文档的每个字母包装在 span 标签中效率不高。

我能够启动一些至少在Chrome中工作的东西。基本上，当您单击一个字母时，它会触发双击以选择该单词。我们得到的选择实际上给了我们整个目标元素的文本。从中，我们得到了被点击的字母。我们删除选择并用这封信做我们想做的事。

在这里摆弄

$(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);
        }
    });
});

您也可以使用以下命令返回 innerHTML：

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

至于更有效的方法...也许试试这个：在Javascript/jQuery中，如何检查字符串的特定部分并确定它是空格还是字母？

你可以用这个脚本来做

$('.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];
    } 
}

我还包含了html和index变量，如果你想对点击的元素做其他事情。

基本上，您将元素的类按空格拆分，然后检查数组是否少于两个元素，在这种情况下，它返回null，否则返回第二个元素。

js小提琴

用span标签将所有文本包装起来，有可能你要找什么

.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>

演示 JSFIDDLE

相关文章：