堆栈内存溢出
  繁体   English   中英

如何美化HTML所以标签属性将保留在一行中？

[英]How to prettify HTML so tag attributes will remain in one single line?

 原文  2017-12-19 02:17:24  3   2    python/ html/ beautifulsoup/ code-formatting

问题描述

我得到了这段代码： 

text = """<html><head></head><body>
    <h1 style="
    text-align: center;
">Main site</h1>
    <div>
        <p style="
    color: blue;
    text-align: center;
">text1
        </p>
        <p style="
    color: blueviolet;
    text-align: center;
">text2
        </p>
    </div>
    <div>
        <p style="text-align:center">
            <img src="./foo/test.jpg" alt="Testing static images" style="
">
        </p>
    </div>
</body></html>
"""

import sys
import re
import bs4


def prettify(soup, indent_width=4):
    r = re.compile(r'^(\s*)', re.MULTILINE)
    return r.sub(r'\1' * indent_width, soup.prettify())

soup = bs4.BeautifulSoup(text, "html.parser")
print(prettify(soup))

上面代码片段的输出现在是： 

<html>
    <head>
    </head>
    <body>
        <h1 style="
                text-align: center;
">
            Main site
        </h1>
        <div>
            <p style="
                color: blue;
                text-align: center;
">
                text1
            </p>
            <p style="
                color: blueviolet;
                text-align: center;
">
                text2
            </p>
        </div>
        <div>
            <p style="text-align:center">
                <img alt="Testing static images" src="./foo/test.jpg" style="
"/>
            </p>
        </div>
    </body>
</html>

我想弄清楚如何格式化输出，所以它变成了这个： 

<html>
    <head>
    </head>
    <body>
        <h1 style="text-align: center;">
            Main site
        </h1>
        <div>
            <p style="color: blue;text-align: center;">
                text1
            </p>
            <p style="color: blueviolet;text-align: center;">
                text2
            </p>
        </div>
        <div>
            <p style="text-align:center">
                <img alt="Testing static images" src="./foo/test.jpg" style=""/>
            </p>
        </div>
    </body>
</html>

<tag attrib1=value1 attrib2=value2 ... attribn=valuen> ，如果可能的话，我想在<tag attrib1=value1 attrib2=value2 ... attribn=valuen>保留html语句，例如<tag attrib1=value1 attrib2=value2 ... attribn=valuen> 。 当我说“如果可能”时，我的意思是不搞砸属性本身的值（value1，value2，...，valuen）。

这可以用beautifulsoup4实现吗？ 到目前为止，我在文档中看到，您似乎可以使用自定义格式化程序，但我不知道如何使用自定义格式化程序，以便它可以完成所描述的要求。

编辑：

@alecxe解决方案非常简单，遗憾的是在一些更复杂的情况下失败，例如： 

test1 = """
<div id="dialer-capmaign-console" class="fill-vertically" style="flex: 1 1 auto;">
    <div id="sessionsGrid" data-columns="[
        { field: 'dialerSession.startTime', format:'{0:G}', title:'Start time', width:122 },
        { field: 'dialerSession.endTime', format:'{0:G}', title:'End time', width:122, attributes: {class:'tooltip-column'}},
        { field: 'conversationStartTime', template: cty.ui.gct.duration_dialerSession_conversationStartTime_endTime, title:'Duration', width:80},
        { field: 'dialerSession.caller.lastName',template: cty.ui.gct.person_dialerSession_caller_link, title:'Caller', width:160 },
        { field: 'noteType',template:cty.ui.gct.nameDescription_noteType, title:'Note type', width:150, attributes: {class:'tooltip-column'}},
        { field: 'note', title:'Note'}
        ]">
</div>
</div>
"""

from bs4 import BeautifulSoup
import re


def prettify(soup, indent_width=4, single_lines=True):
    if single_lines:
        for tag in soup():
            for attr in tag.attrs:
                print(tag.attrs[attr], tag.attrs[attr].__class__)
                tag.attrs[attr] = " ".join(
                    tag.attrs[attr].replace("\n", " ").split())

    r = re.compile(r'^(\s*)', re.MULTILINE)
    return r.sub(r'\1' * indent_width, soup.prettify())


def html_beautify(text):
    soup = BeautifulSoup(text, "html.parser")
    return prettify(soup)

print(html_beautify(test1))

追溯： 

dialer-capmaign-console <class 'str'>
['fill-vertically'] <class 'list'>
Traceback (most recent call last):
  File "d:\mcve\x.py", line 35, in <module>
    print(html_beautify(test1))
  File "d:\mcve\x.py", line 33, in html_beautify
    return prettify(soup)
  File "d:\mcve\x.py", line 25, in prettify
    tag.attrs[attr].replace("\n", " ").split())
AttributeError: 'list' object has no attribute 'replace'

2 个解决方案

解决方案1
 9 已采纳  2017-12-19 02:27:46

BeautifulSoup尝试在输入HTML中保留属性值中的换行符和多个空格。

这里的一个解决方法是迭代元素属性并在美化前清理它们 - 删除换行符并用一个空格替换多个连续的空格： 

for tag in soup():
    for attr in tag.attrs:
        tag.attrs[attr] = " ".join(tag.attrs[attr].replace("\n", " ").split())

print(soup.prettify())

打印： 

<html>
 <head>
 </head>
 <body>
  <h1 style="text-align: center;">
   Main site
  </h1>
  <div>
   <p style="color: blue; text-align: center;">
    text1
   </p>
   <p style="color: blueviolet; text-align: center;">
    text2
   </p>
  </div>
  <div>
   <p style="text-align:center">
    <img alt="Testing static images" src="./foo/test.jpg" style=""/>
   </p>
  </div>
 </body>
</html>

更新 （以解决像class这样的多值属性 ）：

当属性属于list类型时，您只需要添加一个稍微修改，为案例添加特殊处理： 

for tag in soup():
    tag.attrs = {
        attr: [" ".join(attr_value.replace("\n", " ").split()) for attr_value in value] 
              if isinstance(value, list)
              else " ".join(value.replace("\n", " ").split())
        for attr, value in tag.attrs.items()
    }

解决方案2
 4  2017-12-28 18:08:26

虽然BeautifulSoup更常用，但如果您正在使用怪癖并有更多特定要求， HTML Tidy可能是更好的选择。

安装Python库（ pip install pytidylib ）后，请尝试以下代码： 

from tidylib import Tidy
tidy = Tidy()
# assign string to text
config = {
    "doctype": "omit",
    # "show-body-only": True
}
print tidy.tidy_document(text, options=config)[0]

tidy.tidy_document返回带有HTML的元组以及可能发生的任何错误。 此代码将输出 

<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1 style="text-align: center;">
      Main site
    </h1>
    <div>
      <p style="color: blue; text-align: center;">
        text1
      </p>
      <p style="color: blueviolet; text-align: center;">
        text2
      </p>
    </div>
    <div>
      <p style="text-align:center">
        <img src="./foo/test.jpg" alt="Testing static images" style="">
      </p>
    </div>
  </body>
</html>

通过取消注释"show-body-only": True对于第二个样本为"show-body-only": True 。 

<div id="dialer-capmaign-console" class="fill-vertically" style="flex: 1 1 auto;">
  <div id="sessionsGrid" data-columns="[ { field: 'dialerSession.startTime', format:'{0:G}', title:'Start time', width:122 }, { field: 'dialerSession.endTime', format:'{0:G}', title:'End time', width:122, attributes: {class:'tooltip-column'}}, { field: 'conversationStartTime', template: cty.ui.gct.duration_dialerSession_conversationStartTime_endTime, title:'Duration', width:80}, { field: 'dialerSession.caller.lastName',template: cty.ui.gct.person_dialerSession_caller_link, title:'Caller', width:160 }, { field: 'noteType',template:cty.ui.gct.nameDescription_noteType, title:'Note type', width:150, attributes: {class:'tooltip-column'}}, { field: 'note', title:'Note'} ]"></div>
</div>

有关更多选项和自定义，请参阅更多配置 。 有特定于属性的包装选项可能有所帮助。 如您所见，空元素只占用一行，而html-tidy会自动尝试添加DOCTYPE ， head和title标签等内容。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何打印出来，使每个实例的属性都在一行上？ 如何更改 python 代码格式，以便单个语句适合一行，而不是格式化为多个？ 使用 BeautifulSoup 智能美化 html 在 django 中美化 html 页面 如何从单个标签获取许多属性数据？ 通过标签定制BeautifulSoup的美化 如何从 XML 获取属性而不将它们转换为单行 python-如何从HTML td标记中剥离除Python中的rowpan之外的所有属性？ 如何获取HTML标签的所有属性？ BeautifulSoup：提取HTML标签属性
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM