使用Chrome 開發者工具提取對應的字串

小kBlog發表於2024-05-22
Chrome字串

最近在檢視一個API的資料，效果很好，但是裡面只有一部分我想要的內容

如果是簡單一點的可以直接獲取

如下比如我想要提取返回的程式碼中關鍵的字串："video": "這裡的內容"

// 定義一個正規表示式來匹配 '"video": "連結"' 格式的字串
var regex = /"video":\s*"([^"]+)"/gi;

// 用於儲存所有找到的連結
var links = [];

// 執行正規表示式搜尋
var match;
while ((match = regex.exec(document.body.textContent)) !== null) {
  // match[1] 包含連結
  links.push(match[1]);
}

// 列印所有找到的連結，每個連結一行
links.forEach(function(link, index) {
  console.log('video' + (index + 1) + ': ' + link);
});

但是如果返回的結果有10萬行程式碼左右閣下該如何應對？

我突發奇想，讓瀏覽器自己滾動，一邊滾動一邊掃描就像PLC一樣，一邊掃描一邊執行程式

// 定義一個正規表示式來匹配 '"video": "連結"' 格式的字串
var regex = /"video":\s*"([^"]+)"/g;
var matches = [];
var interval;
var step = 100; // 每次滾動的畫素數
var position = 0; // 當前滾動位置

// 滾動函式
function scrollToBottom() {
  position += step;
  window.scrollTo(0, position);
  
  // 檢查是否到達頁面底部
  if (position >= document.body.scrollHeight) {
    clearInterval(interval);
    printMatches();
  } else {
    // 繼續尋找匹配項
    findMatches();
  }
}

// 查詢匹配項的函式
function findMatches() {
  var text = document.body.innerText;
  var match;
  while ((match = regex.exec(text)) !== null) {
    matches.push(match[1]); // 只新增連結部分
  }
}

// 列印匹配結果的函式
function printMatches() {
  console.log('找到的連結數量:', matches.length);
  matches.forEach(function(link, index) {
    console.log('video' + (index + 1) + ': ' + link);
  });
}

// 開始滾動和查詢匹配項
interval = setInterval(scrollToBottom, 50); // 每50毫秒滾動一次

講解：首先定義了一個滾動函式 scrollToBottom，它會逐步向下滾動頁面，並在每次滾動後呼叫 findMatches 函式來查詢匹配的連結。當滾動到頁面底部時，透過 clearInterval 停止滾動，並呼叫 printMatches 函式來列印所有找到的連結。

相關文章