可编辑contenteditable用法代替textarea,高亮显示文本中特定字段的方案

<div contenteditable="true" ></div>

//把文本替换/n,并放在标签里面,对需要高亮的字段,替换到标签里面,标签在css添加样式
function deal_result(arg) {
    $(".crush_content").empty();
    var content  = arg.action.replace(/\n/g,'<br/>'); //换行换成<br/>
    content = "<b>"+content+"</b>";  //插入文本放在标签里面

    //将系统报错高亮显示出来
    var highlight = arg.status.match(/\'([\w\W]+?)\'/g);
    for(var i=0;highlight && i<highlight.length;i++) {
        var key_word = highlight[i].replace(/\'/g, '');
        content = content.replace(new RegExp(key_word,'g'), "<span>" + key_word + "            </span>");  //对出错字段进行高亮
    }
    $(".crush_res").val(arg.status);
    $(".crush_content")[0].innerHTML=content;

};

//把修改过后文本重新取出来给后台处理,替换<br>,替换&nbsp;空格,删除所有标签
var rule_text = $(".crush_content").html().replace(/<br>/ig,"\n").replace(/<[\w\W]+?>/ig,"").replace(/&nbsp;/ig, " ");


代码中使用了大量repalce替换文本:
replace(/\n/g,'<br/>');     //\n换成<br/>,/g是替换不止一次而是所有
match(/\'([\w\W]+?)\'/g);     //查询所有''内的字段,\'转义单引号,()是捕获这里没有用,[\w\W]是任意字符,+是至少一个任意字符,因为有任意字符的原因遇到结束的\'也会匹配通过,加上?是非贪婪匹配,遇到\'就不继续匹配了
replace(/\'/g, '');    //删除单引号
replace(new RegExp(key_word,'g'), "<span>" + key_word + "</span>");    //关键字加上标签;字符串是变量,并且需要/g全部,不能拼接字符串,只能用正则对象了
replace(/<br>/ig,"\n")     //<br/>替换成\n,原来br后面的/不写
replace(/<[\w\W]+?>/ig,"")  //<>标签去掉
replace(/&nbsp;/ig, " ");    //空格替换,前台编辑后可能产生空格需要转换

猜你喜欢

转载自blog.csdn.net/sf131097/article/details/81381392