昨天突然兴起，准备完善秋色园后台的编辑器关于Chrome、FireFox下的选择内容的HTML兼容处理。
JS编辑器获取选择内容的HTML兼容性写法问题描述：
对于如何获取选择的文本（包括Html标签），通常网络上的答案是：
var deditor=document.getElementById('iframe名称').contentWindow;
IE：deditor.pos.htmlText，获得html内容。
其它浏览器：deditor.window.getSelection().toString(); 仅获取不包括html标签的文本。
问题：假充你给一段选择的文字（包括换行、段落格式化的），加一个背影或边框等操作时，如果html标签都失踪了，仅剩下文字，那就不是您想要的效果了。
既然知道了问题，如何解决JS兼容性？
解决问题步骤一：网络搜索
本人并不善长js，深夜中，只能靠程序员的本能，百度或Google现搜现处理了。
然而这个互联网，稍为有点细活的代码，网络上总是难以搜寻，偶尔搜出来的，除了没有答案，另外就是通用性：
deditor.window.getSelection().toString()或deditor.window.getSelection().getRangeAt(0)。
类似的只能获取文字，可是，我要的是包括Html标签的文本，你本应该懂的。
解决问题步骤二：代码调试
在指定相关符合关键字不多的网页中， 找到一个特殊的功能：“Chrome“的脚本调试。
调试方法：工具 - 开发人员工具 - scripts - 选择要调试的js文件。
接下来就是左侧设置断点，右边的设置监控变量和控制下一步等。
很遗憾的是，虽然能调试，试了很多属性和方法，可是还是没发现Chorme下能获取 选择的内容的Html方式。
调试截图如下：
解决问题步骤三：重复网络搜索
一般比较有价值的代码，网上很少会直接出现，一方是开发人员比较舍不得，另一方面是大伙不太爱写文章。
因此，继续搜索，从各类不同的文章中，提取出可能有用的代码。
最后，不知在哪了，看到了一个：selection.getRangeAt(0).cloneContents().childNodes。
从正常的思维中，clone后再取子节点，和直接取子节点，有啥区别呢？可是就是有区别。
解决问题步骤四：重复的代码调试
继续调试，断点，监控变量及值，最后发现，通过克隆后取的子节点，可以取到outerHTML属性，于是问题比较明朗化，写个方法for一下组合。
{
var result='';
return result.replace("<div><br></div>","<br>");
}
由于在Chorme下每次回车都产生"<div><br></div>“，于是去掉多余的标识。
浏览器兼容，不会让你太轻松
本来以为问题解决了，于是在firefox下试了一下，靠，这B的firefox，竟然不行。
于是使用Firfox，进行脚本调试，发现firefox下获得到子节点，根本没有outerHTML属性，太悲剧了，连这个都没有，问题又卡住了。
解决问题步骤五：持续的网络搜索
关键换成了firefox下的js选择html的相关内容及兼容写法，可惜，网络上都是迷惑人标题+没有答案的内容。
在经过N小时的头脑风暴和搜索体验之后，冷静了一下，B的，回去继续调试，看能不能发现新大陆。
解决问题步骤六：持续的调试代码
在Firfox下，调试各属性可能产生的值，及出来的值，明显的没有直接的答案。
最后发现，由于是节点，节点就是属性，标签名、内容文本够成的。
调试如下图：
解决问题步骤七：创新思维：无招剩有招，没有现成的，不要怕麻烦，一切从头组装
在发挥不怕麻烦的精神下，自己重新组合节点的outerHTML，再把所有节点的outerHTML拼接起来。
{
var result='';
var node;
for (var i = 0; i < nodes.length; i++)
{
node=nodes[i];
if(node.nodeValue)
//纯文本节点还原。
{
result+=node.nodeValue;
}
else if(node.tagName)
{
result+="<"+node.tagName;
if(node.innerHTML)
{
//属性还原。
if(node.attributes && node.attributes.length>1)
{
for(var j=0;j<node.attributes.length-1;j++) // 忽略最后一个，最后一个是FirFox自己的节点。
{
result+=' '+node.attributes[j].name+"='"+node.attributes[j].value+"'";
}
}
result+=">"+node.innerHTML+"</"+node.tagName+">";
}
else
{
result+=" />";
}
}
}
return result;
}
步骤八：花点时间，记录在案，分享成果，后续可查。
其它：
这两三天，花了点功能，给秋色园的博客增加了论坛模式，简单切换皮肤就变成了论坛，省去了部署论坛的麻烦，还省了点服务器费用。
博客论坛模式示例：微博粉丝精灵 官网论坛示例，后续再考虑是否绑定BBS二级域名的SEO问题。
转载请注明：JS编辑器获取选择内容的HTML多浏览器兼容性写法（支持Chorme、Firefox） | 胖虎的工具箱-编程导航
相关文章
