從Google Sheets內容的匯出，到字串換行問題
因為想直接在瀏覽器web環境下實現，按照官方指南，操作如下：
1.1，準備內容
1.1.1，一個 Google 賬號
1.1.2，一個可以提供 web 服務的配置
如果有Python環境，
python 2.x python -m SimpleHTTPServer 8000
python 3.x python -m http.server 8000
或者，可以通過webstorm開啟html檔案時，也可以啟動 http://localhost:63342
需要注意的是，無論通過何種方式，注意埠號，之後需要再其他地方使用。
1.2，步驟
1.2.1，Google 控制檯 註冊應用
1
2
4，建立憑據
一定要先建立client ID
跳轉的頁面，點選最右側 配置同意螢幕 。
再跳轉的頁面，只需要填寫 應用名稱 和 電子郵件地址 ，再點選最下方 儲存 即可。
這裡選擇 網頁應用 ，
再定義 名稱 和配置 限制JavaScript的來源 ，
注意埠號要和 1.1.2 中保持一致！
5，再建立API金鑰，建立後關閉彈窗即可。
6，此時，就有了 API金鑰 和 client ID
1.3，套用模板，使用API
新建一個index.html，複製如下程式碼
更改這2個變數為剛剛建立的 API金鑰 和 client ID
更改第1個引數為，自己的Google賬號建立的Excel文件對應的網址字尾。
更改第2個引數為，excel工作簿的名稱和工作表的範圍限制。
如下表示的是從A2單元格所在列開始，到第E列結束的所有內容。
// 這個函式用於傳送請求，拿到文件的內容，
// 所以目標就是格式化響應的結果。
function listMajors() {
gapi.client.sheets.spreadsheets.values.get({
spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms',
range: 'Class Data!A2:E',
}).then(function(response) {
var range = response.result;
if (range.values.length > 0) {
let titleName = ''
let obj = {}
let result = range.values.map((row) => {
row = row.map((r, i) => {
if (r.indexOf('\n') != -1) {
r = r.split('\n').map(item => `<p>${item}</p>`).join('\n')
}
return r
})
let lastContent = row[row.length - 1]
let nameIndex = lastContent.indexOf('title')
if (nameIndex != -1) {
titleName = lastContent.split('|')[1]
} else {
obj[`${titleName}.${lastContent}`] = row[0]
}
});
let objStr = JSON.stringify(obj, null, 4);
// pre是textarea標籤
var pre = document.getElementById('content');
pre.innerHTML = objStr.replace(/\\n/g,' ')
console.log(obj)
} else {
appendPre('No data found.');
}
}, function(response) {
appendPre('Error: ' + response.result.error.message);
});
}
複製程式碼
1.4，啟動和開啟
使用web伺服器啟動 localhost:8000（或自定義的其他埠），並開啟這個index.htm。
在頁面中點選授權，即可看到格式化的結果。
2，字串換行問題
2.1，普通的JSON格式化
將如下的結果放到 <pre> 標籤中，就可以實現在頁面中顯示JSON字串格式化後的結果。
let obj = {
'language': '中文',
'nav': '左側：首頁',
'congrat': ':rocket:恭喜 :rocket: ',
}
// 第3個引數，指定縮排的空白字串
let objStr = JSON.stringify(obj, null, 4);
// 所有換行符替換為br標籤。
let html = objStr.replace(/\n/g, '<br>');
複製程式碼
2.2，第一個問題
如果屬性值中有 html標籤 ，怎樣將標籤顯示在頁面中，而不轉義？
let obj = {
'language': '中文',
'nav': '左側：首頁',
'congrat': ':rocket:恭喜 :rocket: ',
'tips': '<p>前端的樂趣</p>' +
'<p>1. 程式碼千萬行，註釋第一行</p>' +
'<p>2. 編碼不規範，測試兩行淚</p>'
}
let objStr = JSON.stringify(obj, null, 4);
// 所有換行符替換為br標籤。
let html = objStr.replace(/\n/g, '<br>');
複製程式碼
如上操作，結果如下：
<p> 標籤生效了
解決：將標籤替換為大於小於號（這只是一種方案，還有其他方案）。
let html = objStr.replace(/\n/g, '<br>').replace(/<p>/g, '<p>').replace(/<\/p>/g, '</p>'); 複製程式碼
2.3，第2個問題
問題1：如果還有其他標籤，每個都得進行轉換，而且不能將 <br> 標籤進行轉換了，使用正則替換 < > 也有點麻煩。
問題2：物件的屬性值，不像之前那樣，在指定位置換行了。（p標籤失效帶來的問題）
在嘗試過很多次之後發現一個情況，
如果僅僅只是一個字串變數，想讓它在指定位置換行，很隨意，只需要在指定位置插入換行符 \n 即可。
但作為物件的屬性值，也就是說，保持JSON字串格式化之後的這種顯示方式，通過 \n 是無法讓物件的屬性值在指定位置換行的。
解決：
將結果放到文字域 <textarea> 中，
注意是放到文字域的 innerHTML 中，不是 value 屬性！
let obj = {
'language': '中文',
'nav': '左側：首頁',
'congrat': ':rocket:恭喜 :rocket: ',
'tips': '<p>前端的樂趣</p>' + '\n' +
'<p>1. 程式碼千萬行，註釋第一行</p>' + '\n' +
'<p>2. 編碼不規範，測試兩行淚</p>'
}
let objStr = JSON.stringify(obj, null, 4);
// 注意是 \\n，因為這裡要匹配的是 '\n'，而不是物件中隱式的換行符
// 如果使用的是es6的``，手動換行，自帶\n，和物件中的還是不一樣。
// 所以，一定要使用\\n
//是在textarea中，特有的可以進行換行的符號。
let html = objStr.replace(/\\n/g,' ')
複製程式碼
另外，例子中obj物件的 tips 屬性，可以使用 es6 推出的 `` 拼接字串，更方便一點：
注意：如果使用 `` ，就要進行手動換行，最終結果才能換行！
let obj = {
'language': '中文',
'nav': '左側：首頁',
'congrat': ':rocket:恭喜 :rocket: ',
'tips': `<p>前端的樂趣</p>
<p>1. 程式碼千萬行，註釋第一行</p>
<p>2. 編碼不規範，測試兩行淚</p>`
}
複製程式碼
最終效果，可以直接全選複製到其他地方。
為什麼要如此費神折騰這個？
因為，將其按自己定義的格式化後，可以直接複製到程式碼中，不需要再手動一個個的進行換行。
這樣清晰直觀，利於維護。
歡迎指正和提出其他的實現方式。O(∩_∩)O~~