在 Javascript/jQuery 中，如何检查字符串的特定部分并确定它是空格还是字母？答案

【问题标题】：in Javascript/jQuery, how to check a specific part of a string and determine if it is a whitespace or letter?在 Javascript/jQuery 中，如何检查字符串的特定部分并确定它是空格还是字母？
【发布时间】：2010-12-30 04:25:22
【问题描述】：

我想编写一个函数，当我单击 HTML 中字符串（或句子）的任意位置时，它会告诉我这是字母还是空格。这甚至可能吗？例如，我点击这句话中的任意位置：

<div id='sentence'>The cat in the hat.</div>

假设我点击“cat”中的字母“a”。我希望它返回一个警报，告诉我我点击了一个角色。假设我单击“cat”和“in”之间的空格。我希望它返回一个警报，说我点击了一个空格。

这听起来不可能，但我的一个想法是，也许您单击某处并检查您单击的位置的左侧和右侧（例如，您在空格和字母之间单击了右侧），如果其中至少一个字符是一个空格（比如左边），它应该返回你点击了一个空格......这会更容易实现吗？我只是需要一些建议。

【问题讨论】：

有什么限制吗？需要使用的特定浏览器？
应该适用于所有浏览器； Chrome、Firefox、IE 7 及更高版本

标签： javascript jquery

【解决方案1】：

工作示例@http://jsfiddle.net/Kai/k4YMS/

function clickify (e) {
    var arr = e.innerText.split("") || e.textContent.split(""),
        max = arr.length,
        i = 0,
        template = "<span onclick='alert(this.innerText || this.textContent);'>$c</span>",
        result = "";

    for (; i < max; i += 1) {
        result += template.replace("$c", arr[i]);
    }

    e.innerHTML = result;   
}

【讨论】：

很高兴为您提供帮助——最好的部分是您不需要 jQuery！ ;-)
嘿@Kai，仅供参考，尽管它在 IE9 和 Chrome 中确实可以工作，但我无法在最新版本的 Firefox 中工作
@D.Tate 嘿，感谢您的报告。在调用 split 方法之前，我更新了小提琴以检查 innerText 属性是否存在。最新的 FF 使用 textContent，所以它现在可以成功地进行故障转移。

【解决方案2】：

不是直接可能的，但是如果您将 html 元素中的每个字符都提取出来，这是可能的。这是我的想法：

var $sentence = $("#sentence");
var sentence = $sentence.html();

//we'll use this after we recreate the sentence
function tellMeWhatIAm(){
  //as its name says it tells what it is
  alert($(this).text());
}

$.each(sentence,function(i,t){
  //clear the sentence
  if(i==0) $sentence.html("");
  //create every char again
  //and bind click event to our function above
  var $span = $("<span/>",{"text" : t, "click" : tellMeWhatIAm});
  //append the chars back to the sentence wrapper
  $sentence.append($span);
});

虽然还没有测试过，但是这个想法很简单。

希望对你有帮助，思南。

【讨论】：

【解决方案3】：

使用Range，无需修改html。

  $('#sentence').click(function(e) {
    if (window.getSelection) {
      var cursor = window.getSelection().getRangeAt(0).startOffset 
      var str = e.target.innerHTML;
      alert(str[cursor]);

    } else {
      var range = document.selection.createRange();
      range.expand('character');
      alert(range.text);

    }

  });

【讨论】：