最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Replacing selected HTML text in jQuery - Stack Overflow

programmeradmin2浏览0评论

I have this code for replacing selected text: (it putts "1" and "2" before and after selected text):

var content=$("#text").html();
if (window.getSelection) {
 // not IE case
 var selObj = window.getSelection(); 
 var selRange = selObj.getRangeAt(0);

 content2 = content.substring(0,selRange.startOffset) + "1" + content.substring(selRange.startOffset,selRange.endOffset) + "2" + content.substring(selRange.endOffset,content.length);
 $("#content").html(content2);
 selRange.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
 // IE case
 range = document.selection.createRange();
 var selectedText = range.text; 
 var newText = '1' + selectedText + '2'; 
 document.selection.createRange().text = newText; 
}

And HTML:

<div id="text">aaa as asd das d</div>

This works well with "pure" text, but if my HTML looks like this (bolded text)

<div id="text">aaa as <b>asd</b> das d</div>

It breaks down in firefox, because selRange.startOffset object is not returning desired location...

And another question... In IE this is working fine with bolded and "normal" text but since for IE I'm not using jquery html() function - text can't be replaced with HTML code. So if I want to use "< b>" and "< /b>" rather than "1" and "2", text would not be bolded like that in firefox.

Can this two problems be fixed?

I have this code for replacing selected text: (it putts "1" and "2" before and after selected text):

var content=$("#text").html();
if (window.getSelection) {
 // not IE case
 var selObj = window.getSelection(); 
 var selRange = selObj.getRangeAt(0);

 content2 = content.substring(0,selRange.startOffset) + "1" + content.substring(selRange.startOffset,selRange.endOffset) + "2" + content.substring(selRange.endOffset,content.length);
 $("#content").html(content2);
 selRange.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
 // IE case
 range = document.selection.createRange();
 var selectedText = range.text; 
 var newText = '1' + selectedText + '2'; 
 document.selection.createRange().text = newText; 
}

And HTML:

<div id="text">aaa as asd das d</div>

This works well with "pure" text, but if my HTML looks like this (bolded text)

<div id="text">aaa as <b>asd</b> das d</div>

It breaks down in firefox, because selRange.startOffset object is not returning desired location...

And another question... In IE this is working fine with bolded and "normal" text but since for IE I'm not using jquery html() function - text can't be replaced with HTML code. So if I want to use "< b>" and "< /b>" rather than "1" and "2", text would not be bolded like that in firefox.

Can this two problems be fixed?

Share Improve this question edited Sep 13, 2010 at 17:26 domagojk asked Sep 13, 2010 at 17:18 domagojkdomagojk 1,0602 gold badges11 silver badges26 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

startOffset and endOffset are offsets in current node, to get it you need range.startContainer and range.endContainer.

EDIT: It is working good if startContainer and endContainer are on the same level (DOM tree structure is preserved).

EDIT2: Now it makes every selected text bold.

Also I rewrote the IE part, now it operates on HTML, so it's good.

http://jsfiddle/FYJtN/11/

if (window.getSelection) {
    // not IE case
    var selObj = window.getSelection();
    var selRange = selObj.getRangeAt(0);

    var newElement = document.createElement("b");
    var documentFragment = selRange.extractContents();
    newElement.appendChild(documentFragment);
    selRange.insertNode(newElement);

    selObj.removeAllRanges();
} else if (document.selection && document.selection.createRange && document.selection.type != "None") {
    // IE case
    var range = document.selection.createRange();
    var selectedText = range.htmlText;
    var newText = '<b>' + selectedText + '</b>';
    document.selection.createRange().pasteHTML(newText);
}
发布评论

评论列表(0)

  1. 暂无评论