Question

jquery或者js 如何给选中的文字增加标签

<div id="Editor" contenteditable="true" spellcheck="false">
</a>我测试一下呵呵了<br>第二行测试</a>
</div>

当我选中 "呵呵" 然后点击按钮,触发某个事件,网页要变成下面这样

<div id="Editor" contenteditable="true" spellcheck="false">
<a>我测试一下<em>呵呵</em>了<br>第二行测试</a>
</div>

求事件的 jquery或者js 代码
追加一个小问题,这里要判断我选中的文字是id="Editor"的div里面的,如果是其他div的文字则不处理

Answer 1

简单实现
$('#Editor').mouseup(function(){
var s=window.getSelection();
s=s.toString();
s=s.replace(/([\'\"\<\>\[\]\/\?\.\*\+\^\$\!])/g,'\\$1');
var reg=new RegExp(s);console.log(reg);
var h=$(this).html();
if(reg.test(h)){
var reg1=new RegExp('^(.*?)('+s+')(.*?)$');
$(this).html(h.replace(reg1,'$1<em>$2</em>$3'));console.log(reg1);
}

});

追问

谢谢,但把全部"呵呵"都<em>包起来,其他div中的"呵呵"被选中后,editor中的"呵呵"也会被包起来,html()替换后光标会跳走,也不知道是怎么个跳法

我思来想去发现我的问题其实是这样:

1. js或jquery有没有函数可以精确定位鼠标选中的文字?例如返回"呵呵"在editor中的index.
   

2. js或jquery有没有函数可以在指定的div的index插入文字或标签
   

追答

你改过了？
我自己测试没有 这种情况 ‘但把全部"呵呵"都包起来,其他div中的"呵呵"被选中后,editor中的"呵呵"也会被包起来’

1，2有就简单了。
你打印一下 selection里的属性。
我研究不多。

追问

是改了下('^(.*?)('+s+')(.*?)$')好像匹配不到什么东西,所以我把^和$拿掉了.

这时候只匹配第一个..然后我又改成了多匹配..不过由于无法精准定位,也没什么意思

除了html()后光标会跳走外,其他情况是我其他地方代码有些写错了,抱歉

Answer 2

$("#Editor").empty().append("<a>我测试一下<em>呵呵</em>了<br>第二行测试</a>
");这是jquery的方法

追问

这样的话...$("#Editor").html("....")不是更好?

所以抱歉这不是我想要的

我想要整个流程都实现的代码.可以加分哦

追答

$(function(){
$("input[type=button]").click(function(){
addTag("em",temText);
});
$("#Editor a").mouseup(function(){
temText=getSelText();
});
});
var temText="";
function addTag(tagName,textVal){
var obj = $("#Editor a");
var tagHtml = ""+textVal+"";
var html = $(obj).html();
html = html.replace(textVal,tagHtml);
$(obj).html(html);
}

function getSelText() {
return $.browser.msie?document.selection.createRange().text:document.getSelection();
}

我也是闲啊

追问

谢谢了,不过直接替换有些问题,看楼上.
js或jquery有没有函数可以精确定位鼠标选中的文字?例如返回"呵呵"在editor中的index.

js或jquery有没有函数可以在指定的div的index插入文字或标签