使用 Javascript 从 HTML 中提取文本

Question

我想用纯 Javascript 从 HTML 中提取文本（这是针对 Chrome 扩展的）。

具体来说，我希望能够在页面上查找文本并在其后提取文本。

更具体地说，在

https://picasaweb.google.com/kevin.smilak 之类的页面上/BestOfAmericaSGrandCircle#4974033581081755666

我想查找文本“Latitude”并提取其后面的值。 HTML 并不是非常结构化的形式。

什么是一个优雅的解决方案呢？

Answer 1

我认为没有优雅的解决方案，因为正如您所说，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];

Answer 2

你可以做

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))

Answer 3

您感兴趣的文本位于类 gphoto-exifbox-exif-field 的 div 内。由于这是针对 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 中的空格字符（URL 编码，它是 %C2%A0 .. .没时间弄清楚它映射到什么，抱歉）。

Answer 4

我会查询 DOM 并将图像信息收集到一个对象中，这样您就可以引用任何您想要的属性。

例如

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

Answer 5

好吧，如果其他站点需要更一般的答案，那么您可以尝试类似的操作：

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)

对于该示例，返回包含“纬度：36.872068° N”的 1 个元素的数组（这应该很容易解析）。