Home Replace an HTML tag in an HTML document using Python without modifying the rest of the document

Questions

Replace an HTML tag in an HTML document using Python without modifying the rest of the document

September 18, 2023

I’m making a simple Python + HTML website (as part of my study). The website menu looks like this:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products.html">Products</a></li>
    <li><a href="/about.html">About</a></li>
</ul>

This block is stored in a variable, and when any page is generated, other content is concatenated to the variable, and a generated page is transferred to a client (a browser).

I’m trying to get a currently opened menu item to become bold (add B tag) and remove the link (get rid of A tag). For example if Products page is opened, the menu should be changed to this:

<ul>
    <li><a href="/">Home</a></li>
    <li><b>Products</b></li>
    <li><a href="/about.html">About</a></li>
</ul>

I tried HTMLParser and BeautifulSoup, but I don’t understand how to change only some parts of HTML, not ruining the whole HTML.

>Solution :

I suggest to use BeautifulSoup. Let’s make a Python function.

def get_menu_html(current_page_name):
    # each <li> tag has its own ID
    html = """
        <ul>
            <li id="menu_home"><a href="/">Home</a></li>
            <li id="menu_products"><a href="/products.html">Products</a></li>
            <li id="menu_about"><a href="/about.html">About</a></li>
        </ul>
    """

    soup = BeautifulSoup(html, "html.parser")

    # find the tag <li> by ID
    tag = soup.find(id="menu_" + current_page_name)

    # create a new tag <b> with the same text as in <li>
    newtag = soup.new_tag("b")
    newtag.string = tag.get_text()

    # replace <a> inside <li> to <b>
    # so <li><a>...</a></li> turns into <li><b>...</b></li>
    tag.find("a").replace_with(newtag)

    # return prettified HTML
    return soup.prettify()
    
# try it
print(get_menu_html("products"))

You will get:

<ul>
 <li id="menu_home">
  <a href="/">
   Home
  </a>
 </li>
 <li id="menu_products">
  <b>
   Products
  </b>
 </li>
 <li id="menu_about">
  <a href="/about.html">
   About
  </a>
 </li>
</ul>