使用Javascript從HTML中提取文本

我想從純HTML中提取HTML文本（這是針對Chrome擴展的）。使用Javascript從HTML中提取文本

具體來說，我希望能夠在頁面上找到文本並在其後面提取文本。

更具體地講，在頁面上像

https://picasaweb.google.com/kevin.smilak/BestOfAmericaSGrandCircle#4974033581081755666

我想查找文本「緯度」，並提取它之後去的價值。 HTML沒有非常結構化的形式。

什麼是優雅的解決方案呢？

來源

2011-05-22 dudarev

在我看來，沒有優雅的解決方案，因爲正如你所說HTML不是結構化的，「緯度」和「經度」這兩個詞語取決於頁面本地化。盡我所能想到的是依靠基點，這可能不會改變......

var data = document.getElementById("lhid_tray").innerHTML; 
var lat = data.match(/((\d)*\.(\d)*)°(\s*)(N|S)/)[1]; 
var lon = data.match(/((\d)*\.(\d)*)°(\s*)(E|W)/)[1];

來源

2011-05-22 20:28:30

我真的不認爲你可以依靠'°W'和'°N'不改變，但是你可以很容易地將'N'改成'N | S'和'W'到'E | W'在正則表達式中。 – 2011-05-22 23:18:29

我確信lat和lon總是用N，W來表示。我將編輯正則表達式。 – 2011-05-23 06:28:35

如果正則表達式的元素[[3]'相應地爲'S'和'W'，lat＆lon應該有減號，但這些是可以用兩個額外的代碼行來實現的更多細節... – dudarev 2011-05-23 08:26:16

我會查詢DOM並將圖像信息收集到一個對象中，以便您可以引用您想要的任何屬性。

E.g.

function getImageData() { 
    var props = {}; 
    Array.prototype.forEach.apply(
     document.querySelectorAll('.gphoto-exifbox-exif-field > em'), 
     [function (prop) { 
      props[prop.previousSibling.nodeValue.replace(/[\s:]+/g, '')] = prop.textContent; 
     }] 
    ); 
    return props; 
} 

var data = getImageData(); 
console.log(data.Latitude); // 36.872068° N

來源

2011-05-22 20:02:13 Matt

你可以做

var str = document.getElementsByClassName("gphoto-exifbox-exif-field")[4].innerHTML; 
var latPos = str.indexOf('Latitude') 
lat = str.substring(str.indexOf('<em>',latPos)+4,str.indexOf('</em>',latPos))

來源

2011-05-22 20:07:05 mplungjan

你感興趣的div的內部發現gphoto-exifbox-exif-field類的文本。由於這是一個Chrome擴展，我們有document.querySelectorAll這使得選擇該元素很簡單：

var div = document.querySelectorAll('div.gphoto-exifbox-exif-field')[4], 
    text = div.innerText; 

/* text looks like: 
"Filename: img_3474.jpg 
Camera: Canon 
Model: Canon EOS DIGITAL REBEL 
ISO: 800 
Exposure: 1/60 sec 
Aperture: 5.0 
Focal Length: 18mm 
Flash Used: No 
Latitude: 36.872068° N 
Longitude: 111.387291° W" 
*/

這很容易讓你現在想要的東西：

var lng = text.split('Longitude:')[1].trim(); // "111.387291° W"

我用trim()代替split('Longitude: ')，因爲這不是實際上是innerText（網址編碼，它是%C2%A0 ......沒時間找出映射到的內容，對不起）中的空格字符。

來源

2011-05-22 20:09:30

Chrome有innerText？ – mplungjan 2011-05-22 20:14:03

它的確如此。 Firefox是這裏的特例（使用'textContent'代替）。 http://www.quirksmode.org/dom/w3c_html.html#t04 – 2011-05-22 20:14:50

沒錯。我知道Fx的解決方法 – mplungjan 2011-05-23 05:36:04

那麼，如果需要更普遍的答案爲其他網站，那麼你可以嘗試這樣的：

var text = document.body.innerHTML; 
text = text.replace(/(<([^>]+)>)/ig,""); //strip out all HTML tags 
var latArray = text.match(/Latitude:?\s*[^0-9]*[0-9]*\.?[0-9]*\s*°\s*[NS]/gim); 
//search for and return an array of all found results for: 
//"latitude", one or 0 ":", white space, A number, white space, 1 or 0 "°", white space, N or S 
//(ignores case)(ignores multi-line)(global)

對於這個例子，返回一個包含「Latitude： 36.872068°N」的元素數組（這應該很容易解析）。

來源

2011-05-22 22:53:35 Jonathon

注意：I我不是任何正則表達式專家，這個例子應該適用於幾乎任何東西，但我相信他們是更完整和優雅的解決方案。 – Jonathon 2011-05-22 22:54:42

使用Javascript從HTML中提取文本

回答

相關問題