BeautifulSoup: разбирать HTML «скрытый» контент

Question

Я занимаюсь разработкой веб-утилиты Python для BeautifulSoup, которая анализирует «списки продуктов» с этого веб-сайта и извлекает некоторую информацию для каждого списка продуктов (например, цену, поставщика и т. Д.).Я могу извлечь большую часть этой информации, кроме одной (например, количество продукта), которая, кажется, скрыта из raw html.Глядя на веб-страницу через мой браузер, я вижу (unid = units):

product_name       1 unid      $10.00 

, но в HTML-коде для него нет целых значений, которые я могу извлечь.Он показывает этот HTML-текст:

<div class="e-col5 e-col5-offmktplace ">
  <div class="kWlJn zYaQqZ gQvJw">&nbsp;</div> 
  <div class="imgnum-unid"> unid</div>
</div>

Мой вопрос как мне получить это скрытое содержимое e-col5, в котором хранится количество продукта?

import re
import requests
from bs4 import BeautifulSoup

page = requests.get("https://ligamagic.com.br/?view=cards%2Fsearch&card=Hapatra%2C+Vizier+of+Poisons")
soup = BeautifulSoup(page.content, 'html.parser')
vendor = soup.find_all('div', class_="estoque-linha", mp="2")
print(vendor[1].find(class_='e-col1').find('img')['title'])
print(vendor[1].find(class_='e-col2').find_all(class_='ed-simb')[1].string)
print(vendor[1].find(class_='e-col5'))

Answer 1

unid сохраняется в массиве JS

vetFiltro[0]=["e3724364",0,1,....];

1 - это unid, вы можете получить его с помощью регулярного выражения

# e-col5
unitID = vendor[1].get('id').replace('line_', '') # line_e3724364 => e3724364
regEx = r'"%s",\d,(\d+)' % unitID
unit = re.search(regEx, page.text).group(1)
print(unit + ' unids')

Answer 2

@ ewwink выяснил, как вывести unid, но не смог вытащить цены.Я попытался вывести цены в этом ответе.

Фрагмент целевого div:

<div mp="2" id="line_e3724364" class="estoque-linha primeiro"><div class="e-col1"><a href="b/?p=e3724364" target="_blank"><img title="Rayearth Games" src="//www.lmcorp.com.br/arquivos/up/ecom/comparador/155937.jpg"></a></div><div class="e-col9-mobile"><div class="e-mob-edicao"><img src="//www.lmcorp.com.br/arquivos/up/ed_mtg/AKH_R.gif" height="19"></div><div class="e-mob-edicao-lbl"><p>Amonkhet</p></div><div class="e-mob-preco e-mob-preco-desconto"><font color="gray" class="mob-preco-desconto"><s>R$ 1,00</s></font><br>R$ 0,85</div></div><div class="e-col2"><a href="./?view=cards/search&amp;card=ed=akh" class="ed-simb"><img src="//www.lmcorp.com.br/arquivos/up/ed_mtg/AKH_R.gif" height="21"></a><font class="nomeedicao"><a href="./?view=cards/search&amp;card=ed=akh" class="ed-simb">Amonkhet</a></font></div><div class="e-col3"><font color="gray" class="mob-preco-desconto"><s>R$ 1,00</s></font><br>R$ 0,85</div>
                            <div class="e-col4 e-col4-offmktplace">
                                <img src="https://www.lmcorp.com.br/arquivos/img/bandeiras/pten.gif" title="Português/Inglês"> <font class="azul" onclick="cardQualidade(3);">SP</font>

                            </div>
                        <div class="e-col5 e-col5-offmktplace "><div class="cIiVr lHfXpZ mZkHz">&nbsp;</div> <div class="imgnum-unid"> unid</div></div><div class="e-col8 e-col8-offmktplace "><div><a target="_blank" href="b/?p=e3724364" class="goto" title="Visitar Loja">Ir à loja</a></div></div></div>

Если мы посмотрим внимательнее, то сможем,

for item in soup.findAll('div', {"id": re.compile('^line')}):
 print(re.findall("R\$ (.*?)</div>", str(item), re.DOTALL))

Выходные данные [усеченные]:

['10,00</s></font><br/>R$ 8,00', '10,00</s></font><br/>R$ 8,00']
['9,50</s></font><br/>R$ 8,55', '9,50</s></font><br/>R$ 8,55']
['9,50</s></font><br/>R$ 8,55', '9,50</s></font><br/>R$ 8,55']
['9,75</s></font><br/>R$ 8,78', '9,75</s></font><br/>R$ 8,78']
[]
[]

Извлекает основные куски, и мы получим цены.Но это также пропускает несколько элементов.

Чтобы получить все данные, мы можем использовать OCR API и Selenium для этого.Мы можем захватить элементы, представляющие интерес, используя следующий фрагмент:

from selenium import webdriver
from PIL import Image
from io import BytesIO

fox = webdriver.Firefox()
fox.get('https://ligamagic.com.br/?view=cards%2Fsearch&card=Hapatra%2C+Vizier+of+Poisons')
#element = fox.find_element_by_id('line_e3724364')
element = fox.find_elements_by_tag_name('s')
location = element.location
size = element.size
png = fox.get_screenshot_as_png() # saves screenshot of entire page
fox.quit()

im = Image.open(BytesIO(png)) # uses PIL library to open image in memory

left = location['x']
top = location['y']
right = location['x'] + size['width']
bottom = location['y'] + size['height']


im = im.crop((left, top, right, bottom)) # defines crop points
im.save('screenshot.png') # saves new cropped image

Взял справку из https://stackoverflow.com/a/15870708.

Мы можем выполнить итерацию, как мы делали выше, используя re.findall(), чтобы сохранить все изображения.После того, как у нас есть все изображения, мы можем использовать OCR Space для извлечения текстовых данных.Вот краткий фрагмент:

import requests


def ocr_space_file(filename, overlay=False, api_key='api_key', language='eng'):

    payload = {'isOverlayRequired': overlay,
               'apikey': api_key,
               'language': language,
               }
    with open(filename, 'rb') as f:
        r = requests.post('https://api.ocr.space/parse/image',
                          files={filename: f},
                          data=payload,
                          )
    return r.content.decode()

e = ocr_space_file(filename='1.png')

print(e) # prints JSON

1.png:

JSON-ответиз ocr.space:

{"ParsedResults":[{"TextOverlay":{"Lines":[],"HasOverlay":false,"Message":"Text overlay is not provided as it is not requested"},"TextOrientation":"0","FileParseExitCode":1,"ParsedText":"RS 0',85 \r\n","ErrorMessage":"","ErrorDetails":""}],"OCRExitCode":1,"IsErroredOnProcessing":false,"ProcessingTimeInMilliseconds":"1996","SearchablePDFURL":"Searchable PDF not generated as it was not requested."}

Это дает нам, "ParsedText" : "RS 0',85 \r\n".

Answer 3

Если вы посмотрите поближе, unid - это просто изображение в div, перемещенное на class на правильное число.

Например unid 1:

.jLsXy {
    background-image: url(arquivos/up/comp/imgunid/files/img/181224lSfWip8i1lmcj2a520836c8932ewcn.jpg);
}

- это изображение, содержащее числа.

.gBpKxZ {
background-position: -424px -23px;
}

- это класс для числа 1

Так что найдите соответствующий css для числаи создайте свою таблицу (простой способ), но не лучшим способом.

Редактировать: Похоже, что смена позиции (класса) происходит при каждой перезагрузке, поэтому сложнее сопоставить число с изображением:(таким образом, число 1 можно взять из разных мест.

Edit2 Я использовал Chrome Devtools. Если вы посмотрите unid, вы найдете css для каждого класса, а также.Так что после проверки URL было ясно.