Regex для захвата html элементов с их именем класса

Question

Я пытаюсь получить элемент и имя класса для всех элементов в файле html, используя python. Мне удалось получить все имена классов с кодом ниже. Это написано так, потому что я буду go просматривать множество файлов html, сохраняя элементы с именами классов. Игнорирование элементов без имени класса.

 temp_file = open(root + "/" + file, "r", encoding="utf-8-sig", errors="ignore")
    temp_content = temp_file.read()
    class_names = re.findall("class=\"(.*?)\"", temp_content)

Однако сейчас я пытаюсь найти способ получить элемент, к которому принадлежит класс. Имейте в виду, что элементы иногда перекрываются друг с другом, поэтому readlines () тоже не сильно поможет, и, вероятно, будет медленнее, чем регулярное выражение всего документа.

<div class="header_container container_12">
        <div class="grid_5">
              <h1><a href="#">Logo Text Here</a></h1>
        </div>
        <div class="grid_7">
            <div class="menu_items"> 
                <a href="#" class="home active">Home</a><a href="#" class="portfolio">Portfolio</a> 
               <a href="#" 
                class="about">About Me
                </a><a href="#" class="contact">Contact Me</a> 
            </div>
        </div>
</div>

Выше html фрагмент кода специально написан с отступом, чтобы продемонстрировать тип данных, с которыми я работаю ... Цель состоит в том, чтобы сохранить их в хэш-карте. т.е.

"header_Container container_12": "div"
 "grid_5": "div"
 "grid_7": "div"
 "menu_items": "div"
 "home active": "a"
 "portfolio": "a"
 "about": "a"
 "contact": "a"

Answer 1

Regex - плохой выбор для анализа HTML, но, к счастью, с BeautifulSoup это тривиально:

from bs4 import BeautifulSoup

html = """<div class="header_container container_12">
        <div class="grid_5">
              <h1><a href="#">Logo Text Here</a></h1>
        </div>
        <div class="grid_7">
            <div class="menu_items"> 
                <a href="#" class="home active">Home</a><a href="#" class="portfolio">Portfolio</a> 
               <a href="#" 
                class="about">About Me
                </a><a href="#" class="contact">Contact Me</a> 
            </div>
        </div>
</div>"""

for elem in BeautifulSoup(html, "lxml").find_all(attrs={"class": True}):
    print(elem.attrs["class"], elem.name)

Вывод:

['header_container', 'container_12'] div
['grid_5'] div
['grid_7'] div
['menu_items'] div
['home', 'active'] a
['portfolio'] a
['about'] a
['contact'] a

Вы можете поместить это в диктовку как Вы хотите, но будьте осторожны, так как более одного элемента, вероятно, будут отображаться в каждом сегменте. Все, что он сказал бы вам, - это то, что элемент существует и имеет определенное имя тега с заданной c строкой имени класса или кортежем в указанном c порядке.

elems = {}

for elem in BeautifulSoup(html, "lxml").find_all(attrs={"class": True}):
    elems[tuple(elem.attrs["class"])] = elem.name

for k, v in elems.items():
    print(k, v)

Answer 2

Я думаю, что regex - неподходящий инструмент для этой работы, рассмотрите возможность загрузки HTML в документ DOM и анализа его с помощью селекторов DOM.

Следующий пример - javascript, потому что он будет позвольте мне включить его в качестве исполняемого фрагмента, но он должен объяснить подход, достаточный для создания эквивалента python.

var classElements = document.querySelectorAll("[class]");

for(i = 0; i < classElements.length; i++)
{
	console.log(classElements[i].className + ": " + classElements[i].tagName);
}

<div class="header_container container_12">
        <div class="grid_5">
              <h1><a href="#">Logo Text Here</a></h1>
        </div>
        <div class="grid_7">
            <div class="menu_items"> 
                <a href="#" class="home active">Home</a><a href="#" class="portfolio">Portfolio</a> 
               <a href="#" 
                class="about">About Me
                </a><a href="#" class="contact">Contact Me</a> 
        </div>
</div>