使用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中提取文本

回答

相关问题