Добавьте HTML в начало и конец части строки, если класс находится в элементах li

Question

Итак, я пытаюсь изменить структуру DOM меню wordpress в зависимости от того, существует ли класс submenu-item в li. Что я хотел бы сделать, так это изменить его так, чтобы <li class="submenu"><ul> находился перед группой li, а </ul></li> шел после группы li с классом submenu-item.

Например: Вот строка, которая Мне нужно манипулировать (возможно, с помощью REGEX):

<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-description menu-item-5 dropdown"><a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Community Living <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000106" class="d-none d-md-block menu-item-description menu-item-1000106">
            <h3>Community Living</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ac nulla vel venenatis.</p>
        </li>
        <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-6 submenu-item"><a href="#">Child 1</a></li>
        <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-7 submenu-item"><a href="#">Child 2</a></li>
    </ul>
</li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-8 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Aging in Place <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000110" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000110"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000110">
            <h3>Aging in Place</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ac nulla vel venenatis.</p>
        </li>
        <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-9 submenu-item"><a href="#">Child 1</a></li>
        <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-10 submenu-item"><a href="#">Child 2</a></li>
        <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-11 submenu-item"><a href="#">Child 3</a></li>
    </ul>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-12 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Caregiver Services <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000115" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000115"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000115">
            <h3>Caregiver Services</h3>
            <p>Testing a Description without an Image just to see how it shows.  Hopefully fine.</p>
        </li>
        <li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-126 submenu-item"><a href="#">Testing</a></li>
    </ul>
</li>
<li id="menu-item-1000107" class="menu-item menu-item-type-logo d-none d-md-flex menu-item-1000107"><a href="/"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/07/logo.png" alt="" width="194" height="80" /></a></li>
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-111 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Healthcare Center <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000215" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000215"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000215">
            <h3>Healthcare Center</h3>
            <p>Fusce eleifend diam sit amet ipsum iaculis, at sollicitudin risus fermentum. Sed egestas urna ac neque ullamcorper lacinia sed tempus tellus</p>
        </li>
        <li id="menu-item-130" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-130 submenu-item"><a href="#">Child 1</a></li>
    </ul>
</li>

Как я могу реализовать замену строки, чтобы при обнаружении submenu-item она добавляла html до и после группы lis здесь?

Например, хотелось бы изменить его так, чтобы вместо этого он выглядел так:

<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-description menu-item-5 dropdown"><a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Community Living <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000106" class="d-none d-md-block menu-item-description menu-item-1000106">
            <h3>Community Living</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ac nulla vel venenatis.</p>
        </li>
        <li class="submenu">
            <ul>
                <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-6 submenu-item"><a href="#">Child 1</a></li>
                <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-7 submenu-item"><a href="#">Child 2</a></li>
            </ul>
        </li>
    </ul>
</li>
<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-8 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Aging in Place <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000110" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000110"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000110">
            <h3>Aging in Place</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla ac nulla vel venenatis.</p>
        </li>
        <li class="submenu">
            <ul>
                <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-9 submenu-item"><a href="#">Child 1</a></li>
                <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-10 submenu-item"><a href="#">Child 2</a></li>
                <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-11 submenu-item"><a href="#">Child 3</a></li>
            </ul>
        </li>
    </ul>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-12 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Caregiver Services <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000115" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000115"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000115">
            <h3>Caregiver Services</h3>
            <p>Testing a Description without an Image just to see how it shows.  Hopefully fine.</p>
        </li>
        <li class="submenu">
            <ul>
                <li id="menu-item-126" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-126 submenu-item"><a href="#">Testing</a></li>
            </ul>
        </li>
    </ul>
</li>
<li id="menu-item-1000107" class="menu-item menu-item-type-logo d-none d-md-flex menu-item-1000107"><a href="/"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/07/logo.png" alt="" width="194" height="80" /></a></li>
<li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-has-image menu-item-has-description menu-item-111 dropdown">
    <a data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Healthcare Center <span class="caret-arrow"></span></a>
    <ul role="menu" class="mega-menu dropdown-menu">
        <li id="menu-item-1000215" class="menu-item menu-item-custom menu-item-image col-7 d-none d-md-inline-block p-0 menu-item-1000215"><img src="http://levlane-bootstrap.local/wp-content/uploads/2020/08/menu-image-152x214.jpg" alt="" class="img-fluid menu-image" /></li>
        <li class="d-none d-md-block menu-item-description menu-item-1000215">
            <h3>Healthcare Center</h3>
            <p>Fusce eleifend diam sit amet ipsum iaculis, at sollicitudin risus fermentum. Sed egestas urna ac neque ullamcorper lacinia sed tempus tellus</p>
        </li>
        <li class="submenu">
            <ul>
                <li id="menu-item-130" class="menu-item menu-item-type-custom menu-item-object-custom d-md-inline-block menu-item-130 submenu-item"><a href="#">Child 1</a></li>
            </ul>
        </li>
    </ul>
</li>

Надеюсь, это имеет смысл, в основном, просто хочу обернуть группу lis с submenu-item перечислено в имени класса в тегах <li /><ul />.

Возможно ли это сделать, и думаю, что регулярное выражение может здесь помочь, но не знаю, как это сделать. Я использую фильтр wordpress wp_nav_menu_items, поскольку класс wp_navwalker не предоставляет для этого простого способа, который я вижу. Это единственный хук, который на самом деле обеспечивает приличное манипулирование домом, если я не упускаю из виду способ сделать это с помощью другого хука wordpress или чего-то еще?