Cách trích xuất mã html css js từ trang web?

Xin vui lòng có ai ở đây biết làm thế nào tôi có thể trích xuất mã html, cc & js của một yếu tố cụ thể trên một trang web hiện có?

Cảm ơn sự hỗ trợ của bạn

24 Tháng chín, 2017 lúc 6. 23 giờ sáng #260453

người tham gia

Mặc dù việc sao chép toàn bộ tác phẩm của người khác có thể không hoàn toàn hợp đạo đức, nhưng bạn chắc chắn có thể sử dụng bảng điều khiển dành cho nhà phát triển để kiểm tra HTML, CSS và JavaScript cơ bản, để xem một thứ gì đó đã được thực hiện như thế nào. Đó là F12 trong hầu hết các trình duyệt. Nếu bạn sao chép một thành phần trong mã của người khác, hãy nhớ cung cấp một liên kết ngược tới nguồn trong tác phẩm của chính bạn như một biểu hiện đánh giá và thừa nhận tối thiểu. )

Giả sử bạn được giao nhiệm vụ phân tích một số trang web để kiểm tra hiệu suất của nó và bạn cần trích xuất tất cả các tệp cần tải xuống để trang web tải đúng cách, trong hướng dẫn này, tôi sẽ giúp bạn thực hiện điều đó bằng cách xây dựng một công cụ Python để trích xuất tất cả

Chúng tôi sẽ sử dụng các yêu cầu và BeautifulSoup làm trình phân tích cú pháp HTML, nếu bạn chưa cài đặt chúng trên Python của mình, vui lòng thực hiện

pip3 install requests bs4

Hãy bắt đầu bằng cách khởi tạo phiên HTTP và đặt Tác nhân người dùng làm trình duyệt thông thường chứ không phải bot Python

import requests
from bs4 import BeautifulSoup as bs
from urllib.parse import urljoin

# URL of the web page you want to extract
url = "http://books.toscrape.com"

# initialize a session
session = requests.Session()
# set the User-agent as a regular browser
session.headers["User-Agent"] = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36"

Bây giờ để tải xuống tất cả nội dung HTML của trang web đó, tất cả những gì chúng ta cần làm là gọi phiên. get() trả về một đối tượng phản hồi, chúng tôi chỉ quan tâm đến mã HTML chứ không phải toàn bộ phản hồi

# get the HTML content
html = session.get(url).content

# parse HTML using beautiful soup
soup = bs(html, "html.parser")

Bây giờ chúng ta đã có súp của mình, hãy giải nén tất cả các tệp script và CSS, chúng tôi sử dụng súp. phương thức find_all() trả về tất cả các đối tượng súp HTML được lọc bằng thẻ và thuộc tính được truyền

# get the JavaScript files
script_files = []

for script in soup.find_all("script"):
    if script.attrs.get("src"):
        # if the tag has the attribute 'src'
        script_url = urljoin(url, script.attrs.get("src"))
        script_files.append(script_url)

Vì vậy, về cơ bản, chúng tôi đang tìm kiếm các thẻ tập lệnh có thuộc tính src, thuộc tính này thường liên kết đến các tệp Javascript cần thiết cho trang web này

Tương tự, chúng ta có thể sử dụng nó để giải nén các tệp CSS

# get the CSS files
css_files = []

for css in soup.find_all("link"):
    if css.attrs.get("href"):
        # if the link tag has the 'href' attribute
        css_url = urljoin(url, css.attrs.get("href"))
        css_files.append(css_url)

Như bạn có thể biết, các tệp CSS nằm trong thuộc tính href trong thẻ liên kết. Chúng tôi đang sử dụng hàm urljoin() để đảm bảo liên kết là một liên kết tuyệt đối (i. e với đường dẫn đầy đủ, không phải đường dẫn tương đối như /js/script. js)

Cuối cùng, hãy in toàn bộ tập lệnh và tệp CSS và ghi các liên kết vào các tệp riêng biệt

print("Total script files in the page:", len(script_files))
print("Total CSS files in the page:", len(css_files))

# write file links into files
with open("javascript_files.txt", "w") as f:
    for js_file in script_files:
        print(js_file, file=f)

with open("css_files.txt", "w") as f:
    for css_file in css_files:
        print(css_file, file=f)

Khi bạn thực hiện nó, 2 tệp sẽ xuất hiện, một tệp cho liên kết Javascript và tệp còn lại cho tệp CSS

css_files. txt

http://books.toscrape.com/static/oscar/favicon.ico
http://books.toscrape.com/static/oscar/css/styles.css
http://books.toscrape.com/static/oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css
http://books.toscrape.com/static/oscar/css/datetimepicker.css

javascript_files. txt

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://books.toscrape.com/static/oscar/js/bootstrap3/bootstrap.min.js
http://books.toscrape.com/static/oscar/js/oscar/ui.js
http://books.toscrape.com/static/oscar/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js
http://books.toscrape.com/static/oscar/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.all.js

Được rồi, cuối cùng, tôi khuyến khích bạn mở rộng mã này hơn nữa để xây dựng một công cụ kiểm tra tinh vi có khả năng xác định các tệp khác nhau, kích thước của chúng và có thể đưa ra các đề xuất để tối ưu hóa trang web

Để thử thách, hãy thử tải xuống tất cả các tệp này và lưu trữ chúng trong đĩa cục bộ của bạn (hướng dẫn này có thể hữu ích)

Tôi có một hướng dẫn khác để chỉ cho bạn cách trích xuất tất cả các liên kết trang web, hãy xem tại đây

Hơn nữa, nếu trang web bạn đang phân tích vô tình cấm địa chỉ IP của bạn, bạn cần sử dụng máy chủ proxy trong trường hợp đó

Làm cách nào tôi có thể lấy mã nguồn HTML CSS Javascript của một trang web?

Làm cách nào tôi có thể trích xuất HTML và CSS từ một trang web trực tuyến?

Bạn có thể trích xuất mã HTML từ trang web không?