让你的评论框自由粘贴代码

前两天我写过一篇《为评论框添加文字格式化编辑器 》，其中zwwoOoOo在留言中说希望有一种可以转换“<”为html实体符号的方法，所以我给了他一段可以将选中的文字中的“<”转换为“&lt;”的js代码。

后来我仔细想了一下，觉得这个功能很有必要，因为经常有人会询问一些问题，而向他们解释时，评论框中贴进去的代码都会被wordpress给屏蔽掉。我写的那段转换符号代码虽然可以正确转换选中的代码，但是由于需要手动选择黏贴的代码，并点击转换按钮才行。而一旦忘记转换，则就杯具了。

所以，我想要一种可以自动转换的方法，并尽量完美的方法。

先解释两个名词：

嵌套的标签

即code标签内还嵌了一层或多层code标签，这种情况发生在<code>标签就是你贴入的代码一部分。

<code>

//这里是一层代码

    <code>

//    这里是二层代码

    </code>

//这里是一层代码

</code>

并行的标签

即有若干对code标签同时处于同一层

<code>

//这里是代码

</code>

//其他内容或空行

<code>

//这里是代码

</code>

对这两种不同情况应该怎么处理呢？

我是觉得应该这样，嵌套的标签则只有最外层标签有效，中间的都需要转换。平行的标签则分别处理，当成不同的代码块。

我前后试用了三种方法。

第一，我想写一个超级正则表达式，来直接将评论框中<code></code>包围的字符串中的“<”转换为“&lt;”。对于只有一对<code></code>标签的内容可以正确转换，但是对于嵌套的<code>标签、并行的<code>标签就会出现问题了，最后考虑了两个两个小时也没想出解决办法，只好放弃正则方法。或许正则可行，有高手欢迎指点。

第二种方法是将评论框中内容以<code>分割，然后分别处理，但是这种方法对于嵌套的就会出错，因为连续两个以上的<code>标签，在分割时中间的部分会被分割成无标志点(</code>)的片段，所以也无法处理。

第三种，也就是我现在试验成功的方法，是使用基于队列的搜索算法。这也是今天一天的成果吧，一整天都在想这个了。最后精简精简，再精简，代码只有20行了。

使用方法是，将下面的代码直接加入到页面里，比如加到你现在的js文件后面，或者都通<script>标签加到页面中即可。

(function(){

    if(document.getElementById('commentform')||0)

        document.getElementById('commentform').onsubmit=function(){

            var myField=document.getElementById('comment')

            var str=myField.value;

            var start=str.indexOf('<code>');

            var end=str.indexOf('</code>');

            if(start>-1&&end>-1&&start<end){

                myField.value='';

            }else return;

            while(end!=-1){

                myField.value+=str.substring(0,start+6)+str.substring(start+6,end).replace(/<(?=[^>]*?>)/gi,'&lt;').replace(/>/gi,'&gt;');

                str=str.substring(end+7,str.length);

                start=str.indexOf('<code>')==-1?-6:str.indexOf('<code>');

                end=str.indexOf('</code>');

                if(end==-1){

                    myField.value+='</code>'+str;

                }else if(start==-6){

                    myField.value+='</code>';

                }else{

                    myField.value+='</code>';

                }

            }

        }

})();

需要注意的是，你的评论表单的id需是commentform，评论框的id需是comment，如果不是则需要做相应修改。

添加好以后，则在需要显示代码时，将代码包围在<code>标签中即可。比如，你要在评论里显示

<?php echo $title; ?>

，则只需要输入

<code><?php echo $title; ?></code>

即可。

至于加上<code>标签，你可以手动输入，也可以参考我的文章《为评论框添加文字格式化编辑器 》，给评论框 加上可以添加<code>标签的的按钮。

测试的话可在我这里测试，你可以选择你的代码后点击评论框工具栏上的add code按钮，即可自动将代码包含在<code>标签中。也可以手动输入<code>标签

也许还有bug，欢迎测试报告。

是的，你只需将上面的那段js代码在页面里引入即可生效。

也许有人已经发现了，事件处理是表单的submit事件，一开始我是选择提交按钮的onclick事件，后来又改成了现在这个。有兴趣的同学可以了解一下这两个事件的区别。我就不多说了。