12

这是我遇到的一个问题,我不太确定如何解决它。

假设我有一段:

"This is a test paragraph. I love cats. Please apply here"

我希望用户能够单击句子中的任何一个单词,然后返回包含它的整个句子。

4

5 回答 5

11

您首先必须将段落拆分为元素,因为您无法(轻松)检测到没有元素的文本点击:

$('p').each(function() {
    $(this).html($(this).text().split(/([\.\?!])(?= )/).map(
      function(v){return '<span class=sentence>'+v+'</span>'}
   ));
});

请注意,它会正确拆分像这样的段落:

<p>I love cats! Dogs are fine too... Here's a number : 3.4. Please apply here</p>​

然后你会绑定点击:

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

示范

我不知道在英语:中是否是句子之间的分隔符。如果是这样,它当然可以添加到正则表达式中。

于 2012-11-14T20:41:52.500 回答
5

首先,准备好接受一定程度的不准确。这从表面上看似乎很简单,但尝试解析自然语言是一种疯狂的练习。那么,让我们假设所有句子都被.?或标点!。我们可以暂时忘记 interrobangs 等等。让我们也忽略引用的标点,例如"!",它不会结束句子。

另外,让我们尝试在标点符号后加引号,这样就"Foo?"以 as"Foo?"和 not结尾"Foo?

最后,为简单起见,我们假设段落内没有嵌套标签。这并不是一个真正安全的假设,但它会简化代码,并且处理嵌套标签是一个单独的问题。

$('p').each(function() {
    var sentences = $(this)
        .text()
        .replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g, 
                 '<span class="sentence">$1</span>$2');
    $(this).html(sentences);
});

$('.sentence').on('click', function() { 
    console.log($(this).text()); 
});​

它并不完美(例如,引用的标点符号会破坏它),但它会在 99% 的时间里起作用。

于 2012-11-14T21:11:52.747 回答
2
  1. 匹配句子。您可以为此使用正则表达式/[^!.?]+[!.?]/g
  2. 将每个句子替换为span具有单击事件以提醒整个跨度的包装。
于 2012-11-14T20:46:17.423 回答
0

我建议你看看JavaScript 中的选择和范围

没有方法解析,它可以让你获得当前选择的设置,所以你必须自己编写代码......

用于获取基于跨浏览器的 Selection Rang 的 Javascript 库是Rangy

于 2012-11-14T20:43:34.080 回答
0

不知道如何获得完整的句子。但是如果你用空格分割每个单词,你可以尝试这个来逐字获取。

     <div id="myDiv" onmouseover="splitToSpans(this)" onclick="alert(event.target.innerHTML)">This is a test paragraph. I love cats. Please apply here</div>
function splitToSpans(element){
    if($(element).children().length) 
        return;
    var arr = new Array();
    $($(element).text().split(' ')).each(function(){
    arr.push($('<span>'+this+' </span>'));
    });
    $(element).text('');
    $(arr).each(function(){$(element).append(this);});
}
于 2012-11-15T06:08:12.203 回答