首页 > 软件,Javascript > 解决syntaxhighlighter3.0.83版双击复制空格异常的bug

解决syntaxhighlighter3.0.83版双击复制空格异常的bug

由于 SyntaxHighlighter 3.0.83 版本存在不少问题,这里针对双击代码区域复制出来的文字中空格异常进行修复。

案例:使用SyntaxHighlighter 3.0.83版本取消了“查看源码”功能和flash的复制功能,取而代之的是双击代码着色区域之后,插件会将pre等标签转换为textarea,这时允许使用者直接复制其中的代码粘贴到其他地方。

bug:粘贴的代码中的空格不是正常空格,经常报错!

简单修复:使用notepad++等编辑器的批量替换功能将非正常的空格替换为正常空格后问题解决。

原因调查:js中正常空格的ASCII码值是32,异常空格的ASCII码值是160。虽然两者表面上都是空格,但是编程语言中异常空格会报莫名其妙的错误。

举例说明:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <title></title>
        <style type='text/css'>
        </style>
    </head>
    <body>
        <script type='text/javascript'>
            //js中的异常空格
            var data = ' ';
            //它的ASCII码值为160,竟然超过了127,够变态的
            console.log(data.charCodeAt());
            //打印出来还以为是空格呢
            console.log(data);
            //js中的正常的空格
            var space = ' ';
            //其ASCII码值为32,正常
            console.log(space.charCodeAt());
            //由于变态的字符写出来会觉得莫名其妙,我们可以通过fromCharCode获取
            var bt = String.fromCharCode(160);
            console.log(bt.charCodeAt());
            //如果有一大段字符需要修复,可以创建一个正则进行全局替换
            var exp = new RegExp(bt, 'g');
            ok = data.replace(exp, " ");
            //然后这个就修复成功啦
            console.log(ok);
            console.log(ok.charCodeAt());
        </script>
    </body>
</html>

原理很简单,首先你得先获取着色区域的代码,这里其实SyntaxHighlighter已经做好了,双击之后就会放在textarea中了,所以我们要对代码着色区域进行dbclick事件绑定。

代码着色区域的jquery选择器为$(".syntaxhighlighter"),可是这个元素是由SyntaxHighlighter动态生成的,所以需要使用delegate(版本)或on(高版本)在其父元素上进行绑定dbclick事件。这里我们的父元素为$(".post_content_txt")

$(document).ready(function(){
	$(".post_content_txt").on("dblclick", ".syntaxhighlighter", function(){
		var textarea = $(this).find('textarea');
		textarea.val(textarea.val().replace(new RegExp(String.fromCharCode(160), 'g'), " "));
		textarea.trigger("select");
	});
	SyntaxHighlighter.all();
})

上面的代码在$(".syntaxhighlighter")中查找textarea元素并获取其val(),然后使用正则替换掉非正常的空格,然后重写再选中,使用者毫无察觉,兼容IE,chrome,firefox。

教程地址:http://blog.zhengshuiguang.com/software/syntaxhighlighter.html

欢迎转载!但请带上文章地址^^

标签:syntaxhighlighter 双击 空格 bug

相关文章

评论已关闭