突出显示特定数量的字符

前几天我遇到了一个独特的编程挑战，我想在这里分享一下。它非常具体，可能不会有广泛的通用性，但嘿，它可能很有趣。

想法是当您点击文本块中的任何字母时，让 160 个字符变为“选中”状态。

我认为不可能像那样自动“真正”选择文本，因为这对我来说有点像操作系统级功能。不过我真的不知道，如果我错了，请纠正我。所以，我决定做的是“伪造”它，通过在适当的字符后面应用背景颜色。在我们正在做的事情的背景下，这仍然有效。然后，相同的字符被移到文本框中，以便进行潜在的编辑和提交。

对我来说，最困难的部分是想到一种方法来找出文本串中的哪个**字符**被点击了。所以，我再次作弊了。我想，如果我将每个字符都用<span>包裹起来，我就可以监控每个跨度的点击事件。同样好。jQuery 一如既往

var theText = $("#theText");

var theString = theText.text();

var numCharacters = theString.length;

var newHTML = "";

for (i = 0; i <= numCharacters; i++) {
    
    var newHTML = newHTML + "" + theString[i] + "";

}

theText.html(newHTML);

现在，我将点击事件绑定（绑定？）到每个新的用跨度包裹的字符上。当它们被点击时，会从所有字符中移除“选中”类，并将其应用到被点击的字符上。然后，一个 for 循环启动，循环 160 次。它移到下一个字符并突出显示它（通过添加一个类）。

$("span").click(function(){

    $("span").removeClass("selected");

    $(this).addClass("selected");
    
    var nextSpan = $(this);
    
    for (i = 1; i <= 160; i++) {
    
        nextSpan = nextSpan.next();
    
        nextSpan.addClass("selected");
                    
    }

});

因为我还想将这个新选择的文本移到一个文本框中（以便进行进一步的编辑），我在点击函数中运行了第二个循环。这个第二个循环遍历当前选中的每个字符，并将它附加到 jQuery 数据块中保存的字符串中。在循环结束时，该数据块被应用到文本区域。

$("#result").data("result", "");
        
$(".selected").each(function() {

    var oldResults = $("#result").data("result");
            
    var newResults = oldResults + $(this).text();
    
    $("#result").data("result", newResults);

});

$("#result").val($("#result").data("result"));

因为这个目标是最终将字符提交到另一个 URL，所以我创建了一个按钮来执行此操作。当该按钮被点击时，它获取文本区域的值，将其附加到一个 URL，然后将其发送出去。

$("#sendit").click(function() {

    var toURL = "?=" + $("#result").val();

    window.location = toURL;
    
    return false;

});

所以，再次强调，非常具体，我确信它没有广泛的用处，但我从未见过任何其他类似的功能，所以也许它对处于类似位置的人会有用。

 

查看演示   下载文件

 

更新：正如我所希望的，有人提出了另一种（更智能的）方法：Matt Wondra 这里 提供了一个演示。它利用了文本区域和 JavaScript 的“范围”。唯一的缺点是文本区域固有的愚蠢之处，即无法随着内容的高度增长而增长。