PHP：用于在 html 元素中查找类的正则表达式答案

【问题标题】：PHP: Regular expression for finding a class inside html elementPHP：用于在 html 元素中查找类的正则表达式
【发布时间】：2012-07-19 13:46:15
【问题描述】：

我有一个带有子菜单的 html ul 菜单。我想用 PHP 在子菜单的第一项中添加一个“first-item”类。

<ul id="menu-main" class="menu">
  <li id="menu-item-68" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-68"><a href="...">ITEM1</a></li>
  <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="...">ITEM2</a>
  <ul class="sub-menu">
    <li id="menu-item-70" class="first-item menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="...">SUB-ITEM-1</a></li>
    <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="...">SUB-ITEM2</a></li>
  </ul>
  <li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a href="...">ITEM3</a></li>
</ul>

（在文本中查找“第一项”）

到目前为止，我遇到了类似的情况：

$output = preg_replace('/(sub-menu.*class.*)menu-item/smi', '$1 first-item menu-item', $output, 1);

【问题讨论】：

您为什么要尝试使用 PHP 来执行此操作？ PHP 构建 HTML。这种事情通常是用 JavaScript 完成的。
simplehtmldom.sourceforge.net ??检查第二个示例 - 如何修改 HTML Dom 元素 - 或者 - 只使用 javascript？
@JezenThomas：HTML 不一定是输出的，即使是，可访问性仍然是一个有效的问题。 Joudicek：使用 HTML 解析器和序列化器，例如DOMDocument.

标签： php html regex

【解决方案1】：

使用DOMDocument 和DOMXPath 会好得多。它们提供了导航 DOM 的方法。您将使用类似下面的内容来查找子菜单（虽然我没有测试过它，所以 xpath 可能不完全正确）。一旦你找到了你感兴趣的 DOM 元素，你就可以修改它的 class 属性。

$dom = new DOMDocument ();
$dom -> loadHTML ($htmlString);
$path = new DOMXpath ($dom);

$firstItem = $path -> query ('//ul[@id="main-menu"]//ul[@class="sub-menu"]/li[1]');

【讨论】：

【解决方案2】：

首先，第二个<li> 缺少结束</li>。修复该问题将允许您使用它，它使用 DOMDocument / DOMXPath 来更改子菜单中第一个 <li> 上的类：

$doc = new DOMDocument;
$doc->loadHTML( $html);

$xpath = new DOMXPath( $doc);
$first_node = $xpath->query( '//ul[@id="menu-main"]/ul[@class="sub-menu"]/li')->item(0);

$new_class = $doc->createAttribute( "class");
$new_class->appendChild( $doc->createTextNode( "first-item "));
$new_class->appendChild( $doc->createTextNode( $first_node->getAttributeNode("class")->value));

$first_node->setAttributeNode( $new_class);

这会导致子菜单中的第一个<li> 变为look like：

string(198) "<li id="menu-item-70" class="first-item menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a href="...">SUB-ITEM-1</a></li>"

【讨论】：

【解决方案3】：

为此使用 jQuery 或 JavaScript。

这是使用 jQuery 的一种方法：

$('.sub-menu').find('li:first-child').addClass('first-item');

【讨论】：