Javascript 从文本中标记几个单词
我们有一个HTML页面。是否可以通过鼠标选择一段中的几个单词,获取对这些选定单词的引用并封装它们,例如,通过。。。按程序标记?我们可以使用jQuery或HTML5/CSS3 建议将所有段落词包装到跨度元素中:Javascript 从文本中标记几个单词,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我们有一个HTML页面。是否可以通过鼠标选择一段中的几个单词,获取对这些选定单词的引用并封装它们,例如,通过。。。按程序标记?我们可以使用jQuery或HTML5/CSS3 建议将所有段落词包装到跨度元素中: var r = /(\S+)/ig; var text = $("p").text(); $("p").html(text.replace(r, "<span class='w'>$1</span>")); 如果要分析所选文本范围中的单词,应使用window.ge
var r = /(\S+)/ig;
var text = $("p").text();
$("p").html(text.replace(r, "<span class='w'>$1</span>"));
如果要分析所选文本范围中的单词,应使用window.getSelection
请参阅问题或要求我修改此代码。您可以使用mouseup处理程序和getSelection。假设您有一个名为testtagging的div,那么这是一种向该div中的选定文本添加范围的方法。请参阅
[编辑]也调整为与IE一起使用。JSFIDLE也被改编了非常感谢,听起来很不错。我将研究此代码并让您知道。
$("p > .w").on("hover", function()
{
$(this).toggleClass("hover");
})
.on("click", function()
{
$(this).toggleClass("selected");
});
$('#testtagging').on('mouseup',tag);
function tag(e){
tagSelection('<span style="color:red">$1</span>');
}
function tagSelection(html) {
var range, node;
if (document.selection && document.selection.createRange) {
//IE
range = document.selection.createRange();
range.pasteHTML(html.replace(/\$1/,range.text));
return true;
}
if (window.getSelection && window.getSelection().getRangeAt) {
//other browsers
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(
html.replace(/\$1/,range.toString())
);
range.deleteContents();
range.insertNode(node);
}
return true;
}