javascript - 使用 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?"以 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% 的时间里起作用。

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

Answer 3

1. 匹配句子。您可以为此使用正则表达式/[^!.?]+[!.?]/g。
2. 将每个句子替换为span具有单击事件以提醒整个跨度的包装。

Answer 4

我建议你看看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);});
}