使用Javascript获取单击单词的句子
这是我遇到的一个问题，我不太清楚如何处理它。
说我有一个段落：
"This is a test paragraph. I love cats. Please apply here" 我希望用户能够单击句子中的任何一个单词，然后返回包含它的整个句子。
您首先必须将段落拆分为元素，因为您无法（轻松）检测没有元素的文本点击：
$('p').each(function() { $(this).html($(this).text().split(/([\.\?!])(?= )/).map( function(v){return ''+v+''} )); });
请注意，它正确分割像这样的段落：
I love cats! Dogs are fine too... Here's a number : 3.4. Please apply here
然后你会绑定点击：
$('.sentence').click(function(){ alert($(this).text()); });
示范
我不知道英文是否是句子之间的分隔符。 如果是这样，它当然可以添加到正则表达式中。
首先，要准备好接受一定程度的不准确。 从表面上看，这似乎很简单，但试图解析自然语言是一种疯狂的运动。 那么，让我们假设所有句子都被打断了. ， ? ，或! 。 我们现在可以忘记interrobangs等等。 让我们也忽略引用的标点符号，如"!" ，这不会结束句子。
另外，让我们试着在标点符号后抓住引号，这样"Foo?" 最终成为"Foo?" 而不是"Foo?
最后，为简单起见，我们假设段落中没有嵌套标签。 这不是一个真正安全的假设，但它会简化代码，处理嵌套标签是一个单独的问题。
$('p').each(function() { var sentences = $(this) .text() .replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g, '$1$2'); $(this).html(sentences); }); $('.sentence').on('click', function() { console.log($(this).text()); });
它并不完美（例如，引用的标点符号会破坏它），但它会在99％的时间内起作用。
- 现场演示： http ： //jsfiddle.net/SmhV3/
- 稍微放大的版本，可以处理引用的标点符号： http ： //jsfiddle.net/pk5XM/1/
- 匹配句子。 你可以使用/[
/[^!.?]+[!.?]/g。？] + [！/[^!.?]+[!.?]/g这一行的正则表达式。 - 将每个句子替换为具有单击事件的包装
span，以警告整个范围。
我建议你看一下JavaScript中的Selection和range 。
没有方法解析，它可以为您提供当前选择的句子，因此您必须自己编写代码…
用于获取Selection Rang跨浏览器的Javascript库是Rangy 。
不知道如何获得完整的感觉。 但如果你用空格分割每个单词，你可以尝试这一点。
This is a test paragraph. I love cats. Please apply here function splitToSpans(element){ if($(element).children().length) return; var arr = new Array(); $($(element).text().split(' ')).each(function(){ arr.push($(''+this+' ')); }); $(element).text(''); $(arr).each(function(){$(element).append(this);}); }