在元素中的选定文本周围添加标记
在元素中的选定文本周围添加标记
提问于 2014-07-11 12:55:59
如何在元素中的选定文本周围添加<span>标记？
例如，如果有人突出显示"John"，我想在它周围添加span标记。
HTML
<p>My name is Jimmy John, and I hate sandwiches. My name is still Jimmy John.</p>JS
function getSelectedText() {
t = (document.all) ? document.selection.createRange().text : document.getSelection();
return t;
}
$('p').mouseup(function(){
var selection = getSelectedText();
var selection_text = selection.toString();
console.log(selection);
console.log(selection_text);
// How do I add a span around the selected text?
});这里有一个相同的问题：jQuery select text and add span to it in an paragraph，但它使用了过时的jquery方法(例如live)，并且公认的答案有一个bug。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-07-11 14:11:26
我有一个解决方案。获取所选项目的Range和deleteContent，然后在其中插入一个新的span。
$('body').mouseup(function(){
var selection = getSelectedText();
var selection_text = selection.toString();
// How do I add a span around the selected text?
var span = document.createElement('SPAN');
span.textContent = selection_text;
var range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(span);
});您可以看到DEMO here
更新
当然，所选内容将同时删除。因此，如果您愿意，可以使用js代码添加选择范围。
Stack Overflow用户
发布于 2014-07-11 14:41:11
您可以简单地这样做。
$('body').mouseup(function(){
var span = document.createElement("span");
if (window.getSelection) {
var sel = window.getSelection();
if (sel.rangeCount) {
var range = sel.getRangeAt(0).cloneRange();
range.surroundContents(span);
sel.removeAllRanges();
sel.addRange(range);
}
}
});Stack Overflow用户
发布于 2014-07-11 13:32:01
您可以尝试这样做：
$('body').mouseup(function(){
var selection = getSelectedText();
var innerHTML = $('p').html();
var selectionWithSpan = '<span>'+selection+'</span>';
innerHTML = innerHTML.replace(selection,selectionWithSpan);
$('p').html(innerHTML);
});在您的fiddle中，您将再次打开一个新的<p>，而不是关闭的</p>。请更新一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24690357
复制相关文章
相似问题