從Google Sheets內容的導出，到字符串換行問題

1，Google Sheets內容的導出

1，Google Sheets API 指南

由於想直接在瀏覽器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

若是有PHP環境，

php -S 0.0.0.0:8080

或者，能夠經過webstorm打開html文件時，也能夠啓動 http://localhost:63342

須要注意的是，不管經過何種方式，注意端口號，以後須要再其餘地方使用。

1.2，步驟

1.2.1，Google 控制檯 註冊應用

1

2

3，注意這裏直接點 取消

4，建立憑據

必定要先建立client ID

跳轉的頁面，點擊最右側 配置贊成屏幕。

再跳轉的頁面，只須要填寫 應用名稱 和 電子郵件地址，再點擊最下方 保存 便可。

這裏選擇 網頁應用，

再定義 名稱 和配置 限制JavaScript的來源，

注意端口號要和 1.1.2 中保持一致！

5，再建立API密鑰，建立後關閉彈窗便可。

6，此時，就有了 API密鑰 和 client ID

1.3，套用模板，使用API

新建一個index.html，複製以下代碼

demo

更改這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,'&#10;')
        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': '🚀恭喜 🚀 ',
  }
// 第3個參數，指定縮進的空白字符串
let objStr = JSON.stringify(obj, null, 4);
// 全部換行符替換爲br標籤。
let html = objStr.replace(/\n/g, '<br>');
複製代碼

2.2，第一個問題

若是屬性值中有 html標籤 ，怎樣將標籤顯示在頁面中，而不轉義？

let obj = {
    'language': '中文',
    'nav': '左側：首頁',
    'congrat': '🚀恭喜 🚀 ',
    '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, '&ltp&gt').replace(/<\/p>/g, '&lt/p&gt');
複製代碼

2.3，第2個問題

問題1：若是還有其餘標籤，每一個都得進行轉換，並且不能將<br>標籤進行轉換了，使用正則替換< >也有點麻煩。

問題2：對象的屬性值，不像以前那樣，在指定位置換行了。（p標籤失效帶來的問題）

在嘗試過不少次以後發現一個狀況，

若是僅僅只是一個字符串變量，想讓它在指定位置換行，很隨意，只須要在指定位置插入換行符\n便可。

但做爲對象的屬性值，也就是說，保持JSON字符串格式化以後的這種顯示方式，經過\n是沒法讓對象的屬性值在指定位置換行的。

解決：

將結果放到文本域<textarea>中，

注意是放到文本域的 innerHTML 中，不是 value屬性！

let obj = {
    'language': '中文',
    'nav': '左側：首頁',
    'congrat': '🚀恭喜 🚀 ',
    'tips': '<p>前端的樂趣</p>' + '\n' +
    '<p>1. 代碼千萬行，註釋第一行</p>' + '\n' +
    '<p>2. 編碼不規範，測試兩行淚</p>'
  }
  
let objStr = JSON.stringify(obj, null, 4);
// 注意是 \\n，由於這裏要匹配的是 '\n'，而不是對象中隱式的換行符
// 若是使用的是es6的``，手動換行，自帶\n，和對象中的仍是不同。
// 因此，必定要使用\\n
// &#10; 是在textarea中，特有的能夠進行換行的符號。
let html = objStr.replace(/\\n/g,'&#10;')
複製代碼

另外，例子中obj對象的 tips 屬性，可使用 es6 推出的 `` 拼接字符串，更方便一點：

注意：若是使用 `` ，就要進行手動換行，最終結果才能換行！

let obj = {
    'language': '中文',
    'nav': '左側：首頁',
    'congrat': '🚀恭喜 🚀 ',
    'tips': `<p>前端的樂趣</p> <p>1. 代碼千萬行，註釋第一行</p> <p>2. 編碼不規範，測試兩行淚</p>`
  }
複製代碼

最終效果，能夠直接全選複製到其餘地方。

爲何要如此費神折騰這個？

由於，將其按本身定義的格式化後，能夠直接複製到代碼中，不須要再手動一個個的進行換行。

這樣清晰直觀，利於維護。

歡迎指正和提出其餘的實現方式。O(∩_∩)O~~

結束。