innerHTML代码规范问题js - ASP技术论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 ASP技术论坛』 → innerHTML代码规范问题js

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 1906 人关注过本帖， 1 人收藏

标题：innerHTML代码规范问题js

只看楼主加入收藏

lele2007

来　自：广东省深圳
等　级：职业侠客
威　望：6
帖　子：1028
专家分：305
注　册：2007-9-4

第 11 楼

得分:0

以下是引用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)
{
......
}

谢谢。。。

学习编程www.

2010-09-09 09:33

foktime

来　自：奥斯维辛
等　级：贵宾
威　望：35
帖　子：795
专家分：2742
注　册：2009-9-4

第 12 楼

得分:0

对比了代码，是一样的。不同的是我写代码时格式用的是C#的风格。。
if($1)
{
......
}

内个，和这个没关系吧

另外最后这句
return okText.replace(/<\/?([^>]+)(?=\=)>/g, function(lele) { return lele.toLowerCase(); });
注意到没，红的地方加了正向预查，防止属性名大小写被改动，如果你不需要保留属性名原大小写形式，可以不加这个，按原来代码写法就行

[ 本帖最后由 foktime 于 2010-9-9 09:56 编辑 ]

2010-09-09 09:53

lele2007

来　自：广东省深圳
等　级：职业侠客
威　望：6
帖　子：1028
专家分：305
注　册：2007-9-4

第 13 楼

得分:0

嗯。。。

用这个估计是比较好的。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(); });
}

上面的也成功的保留了原属性格式。。双引号也可以了。。^_^..

学习编程www.

2010-09-09 11:03

lele2007

来　自：广东省深圳
等　级：职业侠客
威　望：6
帖　子：1028
专家分：305
注　册：2007-9-4

第 14 楼

得分:0

基本上处理了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 编辑 ]

学习编程www.

2010-09-09 11:12

foktime

来　自：奥斯维辛
等　级：贵宾
威　望：35
帖　子：795
专家分：2742
注　册：2009-9-4

第 15 楼

得分:0

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的属性值，所以不把属性值改小写了

2010-09-09 14:37

foktime

来　自：奥斯维辛
等　级：贵宾
威　望：35
帖　子：795
专家分：2742
注　册：2009-9-4

第 16 楼

得分:0

快改吐了说....

2010-09-09 14:40

lele2007

来　自：广东省深圳
等　级：职业侠客
威　望：6
帖　子：1028
专家分：305
注　册：2007-9-4

第 17 楼

得分:0

买嘎。。。

程序代码：

//将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 编辑 ]

学习编程www.

2010-09-09 16:00

foktime

来　自：奥斯维辛
等　级：贵宾
威　望：35
帖　子：795
专家分：2742
注　册：2009-9-4

第 18 楼

得分:0

你写的内个能实现吗？我用<DIV CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</DIV>测试，返回的是
<div CLASS="LELE" STYLE="MARGIN: 20PX; COLOR: #FFF025">编程论坛</div>
没看到什么效果

最后return那一句 /(\s)style=".*:/g没有匹配到任何字符串

2010-09-09 16:29

lele2007

来　自：广东省深圳
等　级：职业侠客
威　望：6
帖　子：1028
专家分：305
注　册：2007-9-4

第 19 楼

得分:0

原内容：

<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 编辑 ]

学习编程www.

2010-09-09 16:52

快速回复：innerHTML代码规范问题js