使用 NodeJS 從 HTML 中提取字符串

Question

這是html...

<iframe width="100%" height="166" scrolling="no" frameborder="no" 
src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11111111&amp;auto_play=false
&amp;show_artwork=true&amp;color=c3000d&amp;show_comments=false&amp;liking=false
&amp;download=false&amp;show_user=false&amp;show_playcount=false"></iframe>

我正在使用 NodeJS。 我正在嘗試提取 trackID，在本例中為11111111跟隨 tracking tracks%2F 。 執行此操作的最穩定方法是什么？

我應該使用正則表達式還是一些 JS 字符串方法，例如substring()或match() ？

Answer 1

如果您知道tracks%2F只會出現一次，您可以執行以下操作：

var your_track_ID = src.split(/tracks%2F/)[1].split(/&amp/)[0];

可能有更好的方法，但這應該適合您的目的。

Answer 2

使用正則表達式解析 HTML 通常是一個非常糟糕的主意，但這可能是可以原諒的。 為了安全起見，我會尋找完整的 URL：

var pattern = /w\.soundcloud\.com.*tracks%2F(\d+)&/
  , trackID = (html.match(pattern) || [])[1]

Answer 3

您可以使用節點模塊 [url + jsdom + qs] 找到曲目

試試這個

var jsdom = require('jsdom');
var url = require('url');
var qs = require('qs');

var str = '<iframe width="100%" height="166" scrolling="no" frameborder="no"'
  + 'src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11111111&amp;auto_play=false"'
  + '&amp;show_artwork=true&amp;color=c3000d&amp;show_comments=false&amp;liking=false'
  + '&amp;download=false&amp;show_user=false&amp;show_playcount=false"></iframe>';

jsdom.env({
  html: str,
  scripts: [
    'http://code.jquery.com/jquery-1.5.min.js'
  ],
  done: function(errors, window) {
    var $ = window.$;
    var src = $('iframe').attr('src');
    var aRes = qs.parse(decodeURIComponent(url.parse(src).query)).url.split('/');
    var track_id = aRes[aRes.length-1];

    console.log("track_id =", track_id);
  }
});

結果是：

track_id = 11111111

Answer 4

2019 年更新...

這建立在 blueiur 的答案之上，並更詳細地介紹了一個解決方案。 JSDOM需要安裝后才能使用：

npm install jsdom

現在，根據文檔，您可以像這樣實例化JSDOM ：

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

您已經有一些要解析的 html，我將使用您的示例並將其定義為模板文字：

const data = `<iframe width="100%" height="166" scrolling="no" frameborder="no" 
src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11111111&amp;auto_play=false
&amp;show_artwork=true&amp;color=c3000d&amp;show_comments=false&amp;liking=false
&amp;download=false&amp;show_user=false&amp;show_playcount=false"></iframe>`;

這是有趣的部分……在 NodeJS 中解析 html：

const { document } = (new JSDOM(data)).window;

這里發生了什么事？ 您正在使用提供的 HTML 創建一個新的 JSDOM 對象並獲取window屬性的document屬性。 從現在開始，您可以像在瀏覽器中一樣使用document.getElementsByTagName()和其他類似的函數。

要繼續您的特定示例，您需要提取文檔中唯一iframe的src屬性。 有多種方法可以做到這一點。 一個例子是使用getElementsByTagName像這樣拉出第一個iframe ：

const src1 = document.getElementsByTagName('iframe')[0].src;

現在我們有了src屬性，我們可以將其拆分並處理url查詢值。 這是我們將使用 NodeJS 附帶的URL類的地方。 根據文檔，我們可以通過創建一個 URL 對象並訪問searchParams屬性來獲取搜索參數，如下所示：

const params = (new URL(src1)).searchParams;

現在您已將查詢字符串作為URLSearchParams對象，您可以像這樣訪問單個術語：

const scURL = params.get('src');

如果您現在查看scURL的內容，您會發現它是作為查詢傳遞的嵌入 url，因此我們可以使用另一個URL對象解析它並提取pathname屬性，如下所示：

const src2 = (new URL(src2)).pathname;

我們現在已經接近了，並且可以使用 JavaScript 的標准字符串函數將路徑拆分為您想要的 get 值：

const val = src2.split('/')[2];

並打印結果：

console.log(val);

...產生此輸出：

11111111

總而言之，這里是完整的代碼：

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

const data = `<iframe width="100%" height="166" scrolling="no" frameborder="no" 
src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F11111111&amp;auto_play=false
&amp;show_artwork=true&amp;color=c3000d&amp;show_comments=false&amp;liking=false
&amp;download=false&amp;show_user=false&amp;show_playcount=false"></iframe>`;

const { document } = (new JSDOM(data)).window;

const src1 = document.getElementsByTagName('iframe')[0].src;

const params = (new URL(src1)).searchParams;

const scURL = params.get('src');

const src2 = (new URL(src2)).pathname;

const val = src2.split('/')[2];

console.log(val);

隨意鞏固它並根據需要消除中間值。

Answer 5

如果軌道 ID 始終為 8 位數字並且 html 沒有更改，您可以執行以下操作：

var trackId = html.match(/\\d{8}/)

Answer 6

執行此操作的 Right™ 方法是使用一些XML 解析器解析 HTML 並以這種方式獲取 URL，然后使用 reg-exp 解析 URL。

如果由於某些原因您沒有無限的時間和精力，建議的純正則表達式解決方案之一將起作用。