一切关于“问题的解决之道”的方法论都不外乎是“变通”二字的某种讲法。既然这个功能不适宜用Editor.document.selection.createRange()的pasteHTML()方法来实现，我们就不用它好了。一个变通的想法是：通过改变Editor.document.body.innerHTML的全局来实现。

很显然，至少在理论上，整体改变Editor.document.body.innerHTML可以实现任何我们想要的HTML编辑效果。

多好，随着灵光一闪，战略上的大问题在一秒钟之内就被我们搞定了！接下来让我们看看具体的实现方法吧：

要想通过改变Editor.document.body.innerHTML来给选中的内容设置字号大小，首先要解决的一个问题是在Editor.document.body.innerHTML中对选中内容所对应的代码进行定位。这算不上是个超级复杂的问题，但我知道对这个问题的解答也是很多人梦寐以求的。或许能有很多种解，下面给出我Bound0的办法。

显然这个问题不可以像一些人想象的那样随随便便地用正则或者查找之类的方法就搞定，设想我在
Bound0000000000000000000000000000000000000000000000000000中随便选中了一个0（表示为红色），用正则随便查到了一个0，很难确保就是我选中的那个，同样的道理，如果是在雷同的若干段HTML代码中选中了一段，用查找所选字符的方法是不能确保正确定位的。

这个问题的合理的解应该能把Editor.document.body.innerHTML分成三段：partA—选中内容之前的内容所对应的代码、partB—选中内容所对应的代码（就是前面例子中红色的部分）、partC—选中内容之后的内容所对应的代码。（在全选的时候，partA和partC都是空字符串；选中内容为空的时候，从开头到光标位置的内容所对应的代码是partA，partB为空字符串，光标之后的内容所对应的代码是partC）

看看主要的代码：

CODE:

function first()
{
//首先要取得编辑区的内容

var oSel = Editor.document.selection.createRange();
var conts=''+oSel.htmlText //内容选中部分对应的代码，首尾可能带有多余标签（就是前面例子中的蓝色标签）。
var textLength = Editor.document.body.innerText.length
oSel.moveStart("character", -1*textLength) //把选择区的开始位置往前闪，再取一次内容
var contp=''+oSel.htmlText //选中部分及选中部分前的内容，末尾可能带有多余标签。
var conta=''+Editor.document.body.innerHTML //整个内容

var contpa=''
var partC=""
var partB=""
var partA=""

//接下来通过两组循坏，用上面取得的三个内容互相“磨”，把多余的标签“磨”掉。

var m=0
m=conta.indexOf(contp.substr(0,3)) //校正对齐contp和conta的开始位置，有时候conta开始处可能会有多余的<p>，造成两者对不齐

for(var f=contp.length;f>0;f--)
{if(conta.substr(m,f)==contp.substr(0, f)){contpa=contp.substr(0,f);partC=conta.substr(m+f);break}}

var k=contpa.length
for(var u=conts.length;u>0;u--)
{if(conts.lastIndexOf(contpa.substr(k-u))!=-1){partB=contpa.substr(k-u);partA=contpa.substr(0,k-u);break}}

if(conts.length==0)partA=contpa

//显示按要求分好的A、B、C三段内容。

alert(partA)
alert(partB)
alert(partC)
}

实际使用的代码比这个要复杂一些。因为想要应付各种特殊情况、考虑周全也不容易呢。

上面代码所取到的conts和contp常常会包含浏览器自动添加的一些\r\n（回车、换行符），这会造成后面“磨”的困难，有必要先进行格式化。但是由于对于pre、textarea、script、style和xmp这几种标签的内容来说\r\n可能是有意义的，所以不能简单地用.replace(/[\r\n]/g,"")的办法去除。必须既要去除浏览器自动添加的\r\n，又要保全pre、textarea、script和xmp这几种标签的内容。这种局面看起来确实复杂，不过好在浏览器不会在我们要保全的那几种标签的内容里自动添加\r\n，而这个时候原本是罪魁祸首的document.selection.createRange().htmlText的标签自动封闭机制反倒为我们提供了方便：除非选中的内容刚好处于一个标签的内部，否则在conts中将出现完整成对的标签，这样我们就可以比较容易地把位于pre、textarea、script、style和xmp这几种标签中的内容区分出来，只对其他内容进行去除\r\n的操作。而对于选中的内容刚好处于一个标签的内部的这种情况，它的具体情况可能又是五花八门的，我个人采取的办法是把格式化和不格式化都尝试一下，除非格式化的结果令partB长度较长（这说明浏览器自动添加的那些\r\n使“磨”出来的partB长度变短），否则就不格式化。

有时候浏览器自动补全的标签并非添加在选中区域的最外围。例如有时会把</p>结束标签添在</font>标签之前，而这里的</font>标签应该是保留在partB中的，如果把</font>连同</p>一起“磨”掉就不对了。对此采取的办法是检查被“磨”掉的碎渣部分，把碎渣捡起来“磨”好，再装到partB的末尾。

出处：蓝色理想
责任编辑：moby

上一页 前人的误区 下一页 解决之道 [下]

◎进入论坛网页制作、网站综合版块参加讨论