Javascript回圈遍歷JSON，按出現順序組合日期/時間

我想我可能接近基于這個問題的答案的解決方案，但我目前在如何解決我正在使用的 JSON 與該問題中給出的示例的布局差異方面有些困難。這可能是一個比我想象的更容易的問題；任何可能為我指明正確方向的資源都會有所幫助。

我正在使用的 JSON 如下所示：

{
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
}

我的目標是遍歷這個字串，提取每個 URL、日期和時間戳，將日期和時間戳值連接到單個“yyyy-mm-dd 00:00:00”日期 時間值（即：“2021-10 -04 08:57:23")，然后將組合的日期 時間值和關聯的 URL 推送到兩列陣列。

我能夠使用正則運算式提取 URL 和日期值，但是由于動態數量的 URL/時間戳與其相關日期分開列出，我正在努力構思一種將時間戳與正確日期相關聯的方法。

//Extract URLs, dates, times
const urlMatches = text.match(/\bhttps?:\/\/\S /gi);
const dateMatches = text.match(/(\d{1,4}([.\-/])\d{1,2}([.\-/])\d{1,4})/g);
const timeMatches = text.match(/\d{1,2}\D\d{1,2}\D(\d{4}|\d{2})/g);

uj5u.com熱心網友回復：

首先，.split()長字串由"\n". 比您可以.reduce()在拆分陣列上使用以您想要的任何方式對其進行操作，例如匹配、轉換為日期等等。

uj5u.com熱心網友回復：

您可以使用 map、reduce 等，但我不知道它們是否比舊的 forEach 計劃更具可讀性。用一些東西替換那些換行符。您不必這樣做，但會更容易。然后使用像 p1 這樣的正則運算式將其拆分為日期組。請注意，雙換行符很容易檢查。使用 matchAll 和 spread 將其放入陣列中。

迭代那個陣列。由于第一個捕獲組，日期在第一個元素中。將日期存盤在變數中，然后使用第二個正則運算式提取時間/url 對（從第二個捕獲組中），然后將其迭代到緩沖區中，將其與存盤的日期值組合。

const data = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
};

const text = data.info[0];
const p1 = /(\d{4}-\d{2}-\d{2})~(.*?)~~/g;
let vals = [...text.replaceAll("\n", "~").matchAll(p1)];

const p2 = /page visit\s ([^~]*)~\s -\s url:\s ([^~]*)/ig;
let buffer = [];

vals.forEach(v=>{
  let t = v[1];
  let parsed = [...v[2].matchAll(p2)];
  parsed.forEach(p=>{
    buffer.push({dt: t, time: p[1], url: p[2]});  
  });
});

console.log(buffer);

只要日期組由雙換行符分隔并且日期本身后跟換行符，那么第一個模式可以更簡單，例如：/([^~]*)~(.*?)~~/g。請注意， ~~ 終止符僅在最后一個日期后跟雙換行符時才起作用，但看起來確實如此。如果不是，那么你必須使用類似 (?:~~)? 而不是 ~~ 本身。

uj5u.com熱心網友回復：

您可以使用.split(),.map()和.reduce()方法的組合，如下所示：

const jObj = jData.info.map(line =>
    //First split @ \n\n assuming that's where the date might change
    line.split(/[\n]{2,}/).filter(l => l)
    //Then split each new element @ \n, - ,URL: .... to get date followed by time,url pairs
    .map(ln => ln.split(/(?:\n| - |URL: |Page visit ) /).filter(v => v))
    //Manipulate the resulting data to produce timestamp,url pairs
    .map(arr =>
        arr.slice(1).reduce((acc, cur, i, ar) => i % 2 === 0 ? [...acc, ar.slice(i, i   2)] : acc, [])
        .map(([time, url]) => ({
            timestamp: `${arr[0]} ${time}`,
            url
        }))
    )
    //flatten the array or arrays to get an array of objects
    .flat()
);

演示

顯示代碼片段

const jData = {
  "info": [
    "2021-10-04\nPage visit 09:57:33\n - URL: https://www.google.com/\nPage visit 09:57:50\n - URL: https://www.google.com/blah-blah-blah/\nPage visit 09:56:03\n - URL: https://google.com/random-text/blah/\n\n2021-11-04\nPage visit 13:46:03\n - URL: https://www.google.com/blah/blah-blah/\n\n"
  ]
}

const jObj = jData.info.map(line => 
    line.split(/[\n]{2,}/).filter(l => l)
    .map(ln => ln.split(/(?:\n| - |URL: |Page visit ) /).filter(v => v))
    .map(arr => 
        arr.slice(1).reduce((acc,cur,i,ar) => i%2 === 0 ?[...acc,ar.slice(i,i 2)] : acc,[])
        .map(([time, url]) => ({timestamp:`${arr[0]} ${time}`,url}))
    )
    .flat()
);

console.log( jObj );

標籤：javascript 数组 json

上一篇：單擊更改不同的圖片

下一篇：如何將缺失的鍵添加到陣列