Извлечение текста из HTML с помощью Javascript - PullRequest
Новая
       22

Извлечение текста из HTML с помощью Javascript

0 голосов
/ 22 мая 2011

Я хотел бы извлечь текст из HTML с помощью чистого Javascript (это для расширения Chrome).

В частности, я хотел бы иметь возможность находить текст на странице и извлекать текст после него.

Более конкретно, на странице типа

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

Я хотел бы найти текст "Локатор" и извлечь значение, которое идет после него. HTML там не в очень структурированном виде.

Что такое элегантное решение для этого?

Ответы [ 5 ]

2 голосов
/ 23 мая 2011

На мой взгляд, не существует элегантного решения, потому что, как вы сказали, 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];
1 голос
/ 23 мая 2011

вы могли бы сделать 

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))
1 голос
/ 23 мая 2011

Интересующий вас текст находится внутри 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 (в URL-кодировке, %C2%A0 ... не время выяснять, с чем это связано, извините).

0 голосов
/ 23 мая 2011

Хорошо, если для других сайтов требуется более общий ответ, вы можете попробовать что-то вроде: 

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)

Для этого примера возвращается массив из 1 элемента, содержащий «Широта: 36,872068 ° N» (который должен легко анализироваться).

0 голосов
/ 23 мая 2011

Я бы запросил 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
...