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

本文介绍了一种利用JavaScript实现的文本处理方法，包括文本的替换、高亮显示及从富文本编辑器中提取纯文本的技术。具体涉及如何将特殊字符进行转换、使用正则表达式匹配特定模式并进行替换等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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, " ");    //空格替换，前台编辑后可能产生空格需要转换