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

Demonstration

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

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/

Answer 3

匹配句子。您可以使用/[^!.?]+[!.?]/g的正则表达式来实现此目的。
使用包含点击事件的包裹span替换每个句子以提醒整个范围。

Answer 4

我建议你看一下Selection and ranges in JavaScript。

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

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

Answer 5

不确定如何获得完整的句子。但如果你用空格分割每个单词，你可以尝试这个逐字逐句。

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

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

5 个答案: