web工程前後臺換行符傳遞與轉義

問題描述

該問題源自於一個數據展示問題, 後臺文本中的換行符\n通過ajax請求反饋給前臺, 前臺解析json失敗, 導致無法執行ajax的回調函數, 前臺解析報錯爲:
Uncaught SyntaxError: Unexpected token in JSON at position 101

問題分析

產生該問題的表象爲前臺js以json格式解析返回串, 解析到轉義符\, 但無法識別跟隨的n, 從而認爲是返回數據問題而報錯
但該問題並非到此爲止, 由於前臺html中換行符不同於後臺\n, 仍需要在前臺接收信息後做文本替換, 再渲染到對應的頁面元素中

解決方案

後端使用groovy實現, 用來將實際內容中的換行符改爲\\n, 同時將其他\轉義符替換爲斜槓/
注意replace中一個反斜槓文本\要用四個反斜槓\\\\表示, 原因是需要經過java和正則兩個步驟的轉義, 所以需要2*2=4個反斜槓, 同理, 想替換爲\\n就需要8個反斜槓…

def sql = DB.getSql();
def jsonStr = JSONObject.toJSONString(sql.rows(reaSql));
jsonStr.replaceAll("\\\\","/").replaceAll("/n","\\\\\\\\n");

前端接收到響應數據解析json時, 會把文本中的\\n轉義爲\n, 所以針對前端的轉義工作, 就需要將目標文本中的\n替換爲<br>
這裏replace同樣要經過js和正則兩個步驟轉義, 需要4個反斜槓表示, 具體實現如下

var reg = new RegExp("\\\\n", "gmi");
var rep = data.eventMessage.replace(reg, "<br>");
$(".eventMessage").html(rep);