这是我遇到的一个问题,我不太确定如何解决它。
假设我有一段:
"This is a test paragraph. I love cats. Please apply here"
我希望用户能够单击句子中的任何一个单词,然后返回包含它的整个句子。
这是我遇到的一个问题,我不太确定如何解决它。
假设我有一段:
"This is a test paragraph. I love cats. Please apply here"
我希望用户能够单击句子中的任何一个单词,然后返回包含它的整个句子。
您首先必须将段落拆分为元素,因为您无法(轻松)检测到没有元素的文本点击:
$('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());
});
我不知道在英语:
中是否是句子之间的分隔符。如果是这样,它当然可以添加到正则表达式中。
首先,准备好接受一定程度的不准确。这从表面上看似乎很简单,但尝试解析自然语言是一种疯狂的练习。那么,让我们假设所有句子都被.
、?
或标点!
。我们可以暂时忘记 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% 的时间里起作用。
/[^!.?]+[!.?]/g
。span
具有单击事件以提醒整个跨度的包装。我建议你看看JavaScript 中的选择和范围。
没有方法解析,它可以让你获得当前选择的设置,所以你必须自己编写代码......
用于获取基于跨浏览器的 Selection Rang 的 Javascript 库是Rangy。
不知道如何获得完整的句子。但是如果你用空格分割每个单词,你可以尝试这个来逐字获取。
<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);});
}