替换jQuery中选定的HTML文本 [英] Replacing selected HTML text in jQuery

问题描述

我有这段代码替换选定的文本：（它在所选文本之前和之后推1和2）：

  var content = $（＃text）。html（）; 
 if（window.getSelection）{
 // not IE case 
 var selObj = window.getSelection（）; 
 var selRange = selObj.getRangeAt（0）; 
 $ b $ 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.type！=None）{
 // IE case 
 range = document.selection.createRange（）; 
 var selectedText = range.text; 
 var newText ='1'+ selectedText +'2'; 
 document.selection.createRange（）。text = newText; 
} 
  

和HTML：

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

这适用于纯文本，但如果我的HTML看起来像这样（粗体文本）

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

它在Firefox中发生故障，因为selRange.startOffset对象没有返回所需的位置... p>

另一个问题...在IE中，这是工作正常粗体和正常的文本，但因为IE浏览器我没有使用jQuery的HTML（）函数 - 文本可以'用HTML代码替换。因此，如果我想使用< b>和< / b>而不是1和2，则文本不会像firefox中那样粗体显示。

这两个问题是否可以解决？

解决方案

startOffset 和 endOffset 是当前节点的偏移量，为了得到它你需要 range.startContainer 和 range.endContainer 。

编辑：如果 startContainer 和 endContainer 位于同一层（保留DOM树结构）。

编辑2：现在它使每个选定的文本加粗。

另外我重写了IE部分，现在它运行在HTML上，所以很好。

http://jsfiddle.net/FYJtN/11/ 如果（window.getSelection）{
//不是IE的情况
var selObj = window.getSelection（），则返回$ p

pre $ ;
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.type！=None）{
// IE case
var range = document.selection.createRange（）;
var selectedText = range.htmlText;
var newText ='< b>'+ selectedText +'< / b>';
document.selection.createRange（）。pasteHTML（newText）;
}


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?

解决方案

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.net/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);
}

这篇关于替换jQuery中选定的HTML文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！