將html字串轉化為jquery物件

Doyle發表於2016-02-19
HTML字串jQuery物件

昨天想寫一個chrome爬蟲外掛，我用jq試了一下，情況是這樣的：

var baseUrl = "http://www.example.com/";

function startFetch() {
  $.get(baseUrl, function (data) {
    var str = $(`<div></div>`).append(data).find(`#id`).html();
    $(`#log`).html(str);
  });
}

$(function () {
  $("#startFetch").bind("click", startFetch);
});

一開始發現，$.get返回的資料是一個完整的html程式碼，就像這樣:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body></body></html>

我直接用$(data)得到的是一個dom節點集合，而不是一個jq物件，stackoverflow上也有人問到這種情況，綜合幾種情況，我採用了$(`<div></div>`).append(data)這個方案。用$(`<div></div>`)這個實際不存在的節點來儲存這個html文件，然後append返回的就是我要的jq物件的形式。

在用jq實現之後，我又用js重新寫了一個，具體如下：

var baseUrl = "http://www.example.com/";

var get = request.bind(this, `GET`);

function startFetch() {
  get(baseUrl, function (data) {
    var newDiv, str;

    newDiv = document.createElement(`div`);
    newDiv.innerHTML = data;  //這裡如果改用appendChild就會報錯
    str = newDiv.querySelectorAll(`selector`)[1].innerHTML;
    document.getElementById(`log`).innerHTML = str;
  });
}

window.onload = function () {
  document.getElementById(`startFetch`).addEventListener(`click`, startFetch);
};

function request(type, url, opts, callback) {
  var xhr = new XMLHttpRequest();
  if (typeof opts === `function`) {
    callback = opts;
    opts = null;
  }
  xhr.open(type, url);
  var fd = new FormData();
  if (type === `POST` && opts) {
    for (var key in opts) {
      fd.append(key, JSON.stringify(opts[key]));
    }
  }
  xhr.onload = function () {
    callback(xhr.response);
  };
  xhr.send(opts ? fd : null);
}

以下是我完整的整個外掛的結構：
|-js
|-popup.js
|-icon16.png
|-icon48.png
|-icon128.png
|-manifest.json
|-popup.html

完整程式碼如下：

//popup.html

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #log {
      width: 200px;
      line-height: 20px;
    }
  </style>
  <script type="text/javascript" src="js/popup.js"></script>
</head>

<body>
  <button id="startFetch">獲取賬號密碼</button>
  <div id="log">獲取中......</div>
</body>

</html>

//manifest.json
{
  "manifest_version": 2,

  "name": "更新ss",
  "description": "獲取免費賬號並更新到本地",
  "version": "1.0",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "browser_action": {
    "default_icon": "icon128.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "webRequest",
    "webNavigation",
    "webRequestBlocking",
    "proxy",
    "*://*/*"
  ]
}

popup.js的程式碼就是上面純js版

相關文章