php - 如果在 li 元素中找到类，则将 HTML 添加到字符串部分的开头和结尾

Question

所以，我试图根据类是否submenu-item存在于 li 上来更改 wordpress 菜单的 DOM 结构。我想做的是改变它，使其<li class="submenu"><ul>在 li 组之前并在 li</ul></li>组之后与 class 一起出现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找到它会在此处的 lis 组之前和之后添加 html？

例如，想要更改它，使其看起来像这样：

<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>

希望这是有道理的，基本上，只是想将已submenu-item在类名中列出的 lis 组包装在<li /><ul />标签中。

这是可能的吗，并且认为正则表达式可以在这里提供帮助，但不确定如何。我正在使用wp_nav_menu_itemswordpress 过滤器，因为我可以看到 wp_navwalker 类没有提供任何简单的方法来做到这一点。这是唯一真正提供对 dom 的体面操作的钩子，除非我忽略了使用不同的 wordpress 钩子或其他东西做这件事的方式？