【问题标题】:Replace list items nested within certain class替换嵌套在某个类中的列表项
【发布时间】:2018-11-27 21:49:48
【问题描述】:

我正在尝试将 html 标记添加到具有特定类的无序列表中。

这将是开始的 HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>    
<ul class="foo">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

我想最终得到:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>    
<ul class="foo">
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 1</li>
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 2</li>
  <li><svg class="icon"><use xlink:href="#foo"></use></svg>Item 3</li>
</ul>

我还没有找到一个可以用来运行 preg_replace() 的正则表达式,它可以让它工作。

内容是使用 Wordpress 创建的。我想使用一个过滤器来扫描 the_content 并添加额外的标记。以这样的方式:

function foo_ul($text) {
    //some function
    return $text;
}
add_filter('the_content', 'foo_ul');

我不想依赖 Javascript/jQuery,所以我希望在服务器端生成它。

有什么想法吗?

【问题讨论】:

  • 您确定这是使用 php 和 regexp 完成此任务的最佳方式吗?
  • 如果您在服务器端执行此操作,我会使用 html 解析器而不是正则表达式,但我们需要了解更多信息 - 是什么创建了列表?你怎么知道它有什么类?当然,如果列表是使用 php 在服务器端创建的,那么您可以添加 svg 等。在当前的形式中,问题太宽泛,因此不适合 SO - 请使用 help centretour 到见how to ask a good question
  • 内容是由 Wordpress 生成的,所以我想添加一个过滤器来扫描内容并在正确的位置添加所需的标记。
  • 你看起来像这样吗:regex101.com/r/QkWsfU/1
  • 可以使用 js 并在客户端进行 - 可能比编写一些东西来拦截服务器端的插件代码更容易

标签: php html regex wordpress wordpress-theming


【解决方案1】:

正如您在question 中看到的那样,使用正则表达式匹配 HTML 并不好。但是,如果您的字符串是您在 OP 中显示的字符串,您可以使用此正则表达式模式选择 &lt;li&gt;&lt;/li&gt; 之间的每个字符串并向其中添加目标字符串。

$newHtml = preg_replace("/(?<=<li>)(.*)(?=<\/li>)/", '<svg class="icon"><use xlink:href="#foo"></use></svg>$1', $html);

检查结果在demo


更新:如果您有多个ul,并且只想匹配.foo,请使用此代码

$newHtml = preg_replace_callback("/(?<=<ul\sclass=\"foo\">).*?(?=<\/ul>)/s", function($ma){
    return preg_replace("/(?<=<li>)(.*)(?=<\/li>)/", '<svg class="icon"><use xlink:href="#foo"></use></svg>$1', $ma[0]);
}, $html);

demo查看结果

【讨论】:

  • 您还没有展示仅适用于特定类的位
  • 这个只有在类只出现在最后一个
  • @Jasper 你说得对,漏掉了一个字符。模式中的.* 应为.*?。检查3v4l.org/IOokf
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-28
  • 1970-01-01
相关资源
最近更新 更多