使用Javascript从HTML中提取文本
我想从纯HTML中提取HTML文本(这是针对Chrome扩展的)。使用Javascript从HTML中提取文本
具体来说,我希望能够在页面上找到文本并在其后面提取文本。
更具体地讲,在页面上像
https://picasaweb.google.com/kevin.smilak/BestOfAmericaSGrandCircle#4974033581081755666
我想查找文本“纬度”,并提取它之后去的价值。 HTML没有非常结构化的形式。
什么是优雅的解决方案呢?
在我看来,没有优雅的解决方案,因为正如你所说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];
我会查询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
你可以做
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))
你感兴趣的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
......没时间找出映射到的内容,对不起)中的空格字符。
那么,如果需要更普遍的答案为其他网站,那么你可以尝试这样的:
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”的元素数组(这应该很容易解析)。
注意:I我不是任何正则表达式专家,这个例子应该适用于几乎任何东西,但我相信他们是更完整和优雅的解决方案。 – Jonathon 2011-05-22 22:54:42
我真的不认为你可以依靠'°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