问一个，自认为比较复杂的正则表达式的问题，求大神帮忙，谢谢！

[chen_2016_web]

感谢某个朋友，之前帮我解决了这个问题的部分问题，后来我自己做了下修改，已经把一般的问题解决了。看一个新问题，个人认为比较难的！！
下面的是HTML代码，代码有两个容器code和change。我要实现的功能，在chang中，显示(即页面上)code的所有内容，格式都不变，且向每个注释添加span节点。我不使用pre的原因，也是因为不能动态添加节点。

<div id="code">
    <!--第一个,注释节点-->
    <!--第一个注释节点-->
    //第二个注释节点  第二个注释节点
    //第二个注释节点
    /*
    * 第三个注释节点
    * 第三个注释节点
    * 第三个注释节点
    * 第三个注释节点
    * 第三个注释节点
    *
    * */
    /*第三个注释节点*/
</div>
<div id="change"></div>

下面的是javascript或jQuery代码，我已经实现了绝大部分的功能，但还有一个严重的问题，问题在注释里面，不要使用pre解决！

<script src="lib/jquery/jquery.min.js"></script>
    <script>
        $(function(){
            var $code = $('#code'),$change = $('#change'), $codeContent = $('#code').html(),
                $lessThanReg = /</mg,$greaterThanReg =/>/mg;
            $codeContent = $codeContent.replace($lessThanReg,'<');
            $codeContent = $codeContent.replace($greaterThanReg,'>');
            var annotationReg = /<!--[\s\S]*?-->$|\/\/[\s\S]*?$|\/\*[\s\S]*?\*\//img;
           //annotationReg虽然查找到了所有节点，并且在下面添加了span节点，但是多行注释的时候，并没有换行，请问这个问题如何解决？突然发现，把change这个DOM元素，改为pre即可.......如果不使有pre，请问怎么解决？
            $codeContent = $codeContent.replace(annotationReg, function(x) {
                return "<span class='huise'>" + x + "</span>"+"<br>";
            });
            $change.html($codeContent);
        })
    </script>

[天际的海浪]

return "<span class='huise'>" + x.replace(/\r?\n/g,"<br>") + "</span>"+"<br>";