注册 登录
编程论坛 → ASP技术论坛

innerHTML代码规范问题js

lele2007 发布于 2010-09-05 22:38， 1906 次点击
使用 innerHTML给文本域赋值时。。得到的代码在IE 6.0 里的是大写的字母，有些属性没有双引号


<FONT COLOR=red>字体</FONT> 不符合标准。。这个用js要怎样处理成

<font color="red">字体</font>

html代码标签都变成小定。。属性无双引号的自动加上双引号。。？


我是从HTML编辑器里获取的。
程序代码：
//将html标签到大小转换为小写并属性加双引号，IE时才调用
function ieHTML(content)
{
    var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "</"+ $2.toLowerCase() +">";      
        }      
        return ("<"+ $2.toLowerCase() +$3+">").replace(/=(("[^"]*?")|('[^']*?')|([\w\-\.]+))([\s>])/g,function(match2,$1,$2,$3,$4,$5,position,all){
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});
    return okText.replace(/<\/?([^>]+)>/g,function(lele){return lele.toLowerCase();});
}
这个。。还不是很完善。。
有些加不上引号。小写的没问题了。

<font color=#00ffff>51js</font>

color= 这里加不上引号。。

pluginspage=http:// 加不上引号

"><embed style="width: 498px; height: 500px" pluginspage=http://www. src=http://player. width="498" height="500" type=application/x-shockwave-flash wmode="transparent" quality="high"></embed>




[ 本帖最后由 lele2007 于 2010-9-5 22:40 编辑 ]
18 回复
#2
lele20072010-09-05 22:39
html=html.replace(/<\w+( [^=<>]+=[^<>]*)+\/?>/g,function(m,p1,p2){
var rg=/<(\w+)(( [^=<>]+=[^<>]*)+\/?>)/;
m='<'+m.replace(rg,'$1').toLowerCase()+m.replace(rg,'$3')+'>';
return m.replace(/([^=]+=)([^<>/]*)/g,function(m1,p3,p4){return p3+'"'+p4+'"';  });}).replace(/(<\/)([^<>/= ]+)>/g,function(m,p1,p2){return p1+p2.toLowerCase()+'>';});

请问这个有什么比较好的办法能实现？

innerHTML后，html标签加上引号。。
#3
aspic2010-09-06 11:32
小子~又写编辑器啊
#4
lele20072010-09-06 15:12
以下是引用aspic在2010-9-6 11:32:32的发言：

小子~又写编辑器啊
呵呵。。。之前的是前台。现在是后台。。^_^..~
上次用你的方法有效
这个innerHTML返回的信息，版主，也支个招？
#5
foktime2010-09-08 15:48
return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g, function(match2, $1, $2, $3, $4, $5, position, all) {


把我叫过来都没分接了

[ 本帖最后由 foktime 于 2010-9-8 17:39 编辑 ]
#6
lele20072010-09-08 20:00
以下是引用foktime在2010-9-8 15:48:36的发言：

return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g, function(match2, $1, $2, $3, $4, $5, position, all) {


把我叫过来都没分接了
^_^...~~


版主，我测试了代码。。在编辑器里的内容，，其它的都能正常，标签小写成功。

但是，双引号加不上。。
<font color=#0099ff>。。编程论坛</font>。
<p><embed pluginspage=http://www. src=http://player. width="600" height="500" type=application/x-shockwave-flash wmode="transparent" quality="high"></embed>

embed标签里的  pluginspage=""  双引号没有效果。。了  ~ _ ~....
#7
lele20072010-09-08 20:02
大部份，双引号可以加上。。

好奇怪。。

<font color=#0099ff>。。编程论坛</font>。  这个font标签的加不上。。
flash标签的。也是一样。。
#8
lele20072010-09-08 20:41
前台编辑器。。
只有本站会员才能查看附件，请 登录


预览图片：
只有本站会员才能查看附件，请 登录


---------------------------------我是谁？我是分割线---------------------------------

后台编辑器..
只有本站会员才能查看附件，请 登录


预览图：
只有本站会员才能查看附件，请 登录
#9
towering2010-09-09 00:15
收下备用，谢谢！
#10
foktime2010-09-09 08:33
怎么会没效果呢  正则已经没有问题了啊  给你下面代码你测试一下。
程序代码：

    alert(ieHTML('<embed pluginspage=http://www. src=http://player. width="600" height="500" type=application/x-shockwave-flash wmode="transparent" quality="high"></embed>'));
    alert(ieHTML('<font color=#0099ff>。。编程论坛</font>'));
function ieHTML(content)
{
    var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "</"+ $2.toLowerCase() +">";     
        }
        return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g, function(match2, $1, $2, $3, $4, $5, position, all) {
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});

return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });
}
仔细检查检查看别的地方是不是有问题
#11
lele20072010-09-09 09:33
以下是引用foktime在2010-9-9 08:33:20的发言：

怎么会没效果呢  正则已经没有问题了啊  给你下面代码你测试一下。
 
    alert(ieHTML(''));
    alert(ieHTML('。。编程论坛'));
function ieHTML(content)
{
    var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "";      
        }
        return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g, function(match2, $1, $2, $3, $4, $5, position, all) {
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});
 
return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });
}仔细检查检查看别的地方是不是有问题
可以了.xixi...
直接复制这段代码覆盖之前的。有效果了。
对比了代码，是一样的。不同的是我写代码时格式用的是C#的风格。。
if($1)
{
    ......
}

谢谢。。。
#12
foktime2010-09-09 09:53
对比了代码，是一样的。不同的是我写代码时格式用的是C#的风格。。
if($1)
{
    ......
}
内个，和这个没关系吧
另外最后这句
return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });
注意到没，红的地方加了正向预查，防止属性名大小写被改动，如果你不需要保留属性名原大小写形式，可以不加这个，按原来代码写法就行


[ 本帖最后由 foktime 于 2010-9-9 09:56 编辑 ]
#13
lele20072010-09-09 11:03
嗯。。。

用这个估计是比较好的。return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });

有些CSS是大写的名字。 :

.LELE{color:red;}

不保留，会变成：<div class="lele">内容</div>  这样引用应该就会失效了。

最后改成了这样：
程序代码：
function ieHTML(content)
{
    //var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
      return content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "</"+ $2.toLowerCase() +">";   

        }
        return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g,function(match2,$1,$2,$3,$4,$5, position,all) {
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});
    //return okText.replace(/<\/?([^>]+)>/g,function(lele){return lele.toLowerCase();});
    //return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });
}
上面的也成功的保留了原属性格式。。双引号也可以了。。^_^..
 
#14
lele20072010-09-09 11:12
基本上处理了ie的innerHTML

还有另一个问题。。

<div class="LELE" style="margin: 20px; color: #FFF025">编程论坛</div>

这段代码中。。保留了LELE  为大写。。
style里的css margin:20PX;color:#FFF025;  会返回：MARGIN: 20px; COLOR: #fff025  

margin返回大写。。color  变成了大写
#FFF025  颜色返回了小写。  style行内样式的，还是有这个问题

[ 本帖最后由 lele2007 于 2010-9-9 11:15 编辑 ]
#15
foktime2010-09-09 14:37
alert(ieHTML('<DIV CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</DIV>'));
function ieHTML(content)
{
    var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "</"+ $2.toLowerCase() +">";      
        }
        return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g, function(match2, $1, $2, $3, $4, $5, position, all) {
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});

return okText.replace(/<\/?([^>]+?)>/g, function(lele) { return lele.replace(/\b(\w+?)(?=\=)/g, function(a) { return a.toLowerCase(); }); });
}
引号里的属性值保持不变，你再试试
考虑到属性值有保持大写的需要，比如class的属性值，所以不把属性值改小写了
#16
foktime2010-09-09 14:40
快改吐了说....
#17
lele20072010-09-09 16:00
买嘎。。。

程序代码：
//将html标签到大小转换为小写并属性加双引号，IE时才调用
function ieHTML(content)
{
      var okText = content.replace(/<(\/?)(\w+)([^>]*)>/g,function(match,$1,$2,$3){
        if($1){
                return "</"+ $2.toLowerCase() +">";   

        }
        return ("<" + $2.toLowerCase() + $3 + ">").replace(/=(("[^"]*?")|('[^']*?')|([^\s]+))([\s>])/g,function(match2,$1,$2,$3,$4,$5, position,all) {
                if($4){
                        return '="'+ $4 +'"'+ $5;
                }
                return match2;
        })
});
    return okText.replace(/(\s)style=".*:/g,function(lele){return lele.toLowerCase();});   

}
这样实现了。。
受益匪浅。。foktime ^_^..谢谢。

[ 本帖最后由 lele2007 于 2010-9-9 16:11 编辑 ]
#18
foktime2010-09-09 16:29
你写的内个能实现吗？我用<DIV CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</DIV>测试，返回的是
<div CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</div>
没看到什么效果 最后return那一句 /(\s)style=".*:/g没有匹配到任何字符串
#19
lele20072010-09-09 16:52
原内容：

<DIV CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</DIV>测试，返回的是
<div CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</div>

返回：

<div class="LELE" style="margin: 20px; color: #fff025">编程论坛</div>测试，返回的是
<div class="LELE" style="margin: 20px; color: #fff025">编程论坛</div>

返回的内容是我需要的结果了。。我的正则很笨- - ||..
class="LELE"  保持了大写。。

style="MARGIN:20PX;COLOR: #FFF025;"
正确的返回了：margin: 20px; color: #fff025（我在编辑器里面测试故意写一些代码。测试了你给的内个也能正常返回哇。。）

呵呵。。就是想要这个效果。
下一步可能会把  color:#FFF025这里之间属性值大写不改。。以及  color="#FFF526"  这里的值大写不变。
这样基本就解决了innerHTML在IE only的问题了。



原内容截图：
只有本站会员才能查看附件，请 登录


处理后结果截图：
只有本站会员才能查看附件，请 登录


PS：呃，我是在编辑器里测试的。

[ 本帖最后由 lele2007 于 2010-9-9 17:03 编辑 ]
1
©2025, BC-CN.NET
电脑版