javascript - 通过正则表达式 WordPress 修改菜单项的第一个字母不起作用

Question

我正在尝试为 WordPress wp_nav_menu 中每个菜单项的第一个字母设置样式。我正在使用正则表达式和 JavaScript 来实现这一点，但由于某种原因，它没有在锚标签中应用 span 标签。我已将脚本包含在关闭正文之前的页脚中，并且正在使用 windows.onload 函数，但没有运气。对此的任何帮助将不胜感激。谢谢你。这是以下代码。

页脚脚本：

<script>
            window.onload = function(){
                var elements = document.querySelectorAll('a.each-word')
                for (var i=0; i<elements.length; i++){
                    elements[i].innerHTML = elements[i].innerHTML.replace(/\\b([a-z])([a-z]+)?\\b/gim, "<span class='first-letter'>$1</span>$2")
                }
            }
        </script>

functions.php 中 PHP 中的菜单脚本：

// HTML5 Blank navigation
function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu-wrapper',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '<i class="fas fa-minus"></i>',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 1,
        'walker'          => ''
        )
    );
}

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'each-word'; // or something based on $item
    $atts['class'] = $class;
    return $atts;
}

样式.css

.fas.fa-minus {
    color: #704179!important;
    font-size: 12px!important;
  }

  .first-letter span {
    color: #704179!important;
    font-size: 26px!important;
    font-weight: bold!important;
  }

标题导航部分：

<!-- nav -->
    <nav class="nav" role="navigation">
        <?php html5blank_nav(); ?>
    </nav>
<!-- /nav -->

编辑：将代码中的正则表达式修改为/\b([a-z])([a-z]+)?\b/gim 我的菜单后，现在显示如下：

我要拍摄的是-如何开始

编辑：为了让它工作 - 将 CSS 更改为以下内容：

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

.fontawesome::before {
  font-family: "Font Awesome 5 Free";
  content: "\f068"!important;
  color: #704179!important;
  font-size: 12px!important;
}  

  .fas.fa-minus {
    color: #704179!important;
    font-size: 12px!important;
  }

 a span.first-letter  {
    color: #704179!important;
    font-size: 26px!important;
    font-weight: bold!important;
  }

我还将我的functions.php更改为以下内容：

function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu-wrapper',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 1,
        'walker'          => ''
        )
    );
}

add_filter( 'nav_menu_link_attributes', 'wpse156165_menu_add_class', 10, 3 );

function wpse156165_menu_add_class( $atts, $item, $args ) {
    $class = 'each-word fontawesome'; // or something based on $item
    $atts['class'] = $class;
    return $atts;
}

最后，我的脚本是这样的：

<script>
            window.onload = function(){
                var elements = document.querySelectorAll('a.each-word')
                for (var i=0; i<elements.length; i++){
                    elements[i].innerHTML = elements[i].innerHTML.replace(/\b([a-z])([a-z]+)?\b/gim, "<span class='first-letter'>$1</span>$2")
                }
            }
        </script>

标签： javascriptphpcssregexwordpress