使用Javascript获取单击单词的句子

Question

这是我遇到的一个问题,我不太确定如何处理它.

说我有一个段落:

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

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

Answer 1

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

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

示范

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

Answer 2

首先,要准备好接受一定程度的不准确.从表面上看,这似乎很简单,但试图解析自然语言是一种疯狂的运动.让我们假设,那么,所有的句子穿插.,?或!.我们现在可以忘记interrobangs等等.让我们也忽略引用的标点符号"!",它不会结束句子.

此外,让我们尝试标点后抢引号,以便"Foo?"为最终"Foo?"并没有"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%的时间内起作用.

• 现场演示:http://jsfiddle.net/SmhV3/
• 稍微放大的版本,可以处理引用的标点符号:http://jsfiddle.net/pk5XM/1/