写一个程序员博客，绝大多数时候都需要代码演示。这时候需要高亮显示，最好还是能快速复制模块的代码，节约时间。这个时候我们可以引入layui 的 code 模块。

演示如下。

$('pre').addClass('layui-code');
layui.use('code', function() { //加载code模块
    layui.code({
        title: 'code',
        encode: false,
    }); //引用code方法
    $('.layui-code-h3 a').text('复制').attr('href', 'javascript:;').attr('onclick', 'copyCode(this);');
});

JS 函数如下所示

// 实现点击按钮，复制文本框中的的内容  对隐藏元素无效 可以采用固定定位放置到窗口之外
function onCopy(text) {
	if (text==null) {
		alert('请选择需要复制的内容');
	}
	var element = document.createElement('textarea');
	element.style.position = 'fixed';
	element.style.top = '-500px';
	element.style.left = '-500px';
	//把需要复制的内容放置在该元素中
	element.innerHTML = text;
	document.body.appendChild(element);
	element.select(); // 选择对象
	document.execCommand("Copy"); // 执行浏览器复制命令
	// alert("已复制好，可贴粘。");
	document.body.removeChild(element);
}

function copyCode(v) {
    var e = $(v);
    var text = '';
    var elements = e.parent().next().children('li');
    $.each(elements,function(i,element){
        var str = $(element).text();
        text +=str+"\n";
    });
    // var text = e.parent().next().find('li').html();
    //这段代码单独URL解码
    var+keys+%3D+%5B'%3Ccode%3E'%2C'%3C%2Fcode%3E'%2C'%3Cbr%3E'%2C'%3Cbr%2F%3E'%2C'+-+'%2C'%7D.%5Cn'%2C%22%5C%5C.+%3D%22%5D%3B
    var repalces = ['','','\r\n\r\n','\r\n','-','}\n\n','.='];
    for(var i=0;i<keys.length;i++) {
        var regExp = new RegExp(keys[i], 'gi');
        text = text.replace(regExp,repalces[i]); 
    }
    onCopy(text);
    layer.msg('复制成功,失败请手动复制。');
}

需要注意的是，有些时候我们需要美化完代码才粘贴进去。这个时候会出现部分代码会语法错误。如.= 格式化成 . = 中间多了个空格,PHP会报错。

因此我们需要删除多余字符。采用JS正则表达式全局替换。但是.号又是属于特殊字符需要转义。要用反斜杠\做转义。实践之后发现单单一个反斜杠还无法转义。得用两个~~ 很可能内部多做一步处理。得把反斜杠也在做转义，因此需要两个