用 <p> 标签和类替换标题 (<h1>, <h2> ...) 标签

Posted

技术标签:

【中文标题】用 <p> 标签和类替换标题 (<h1>, <h2> ...) 标签【英文标题】:Replacing Heading (<h1>, <h2> ...) Tags with <p> Tags and Classes 【发布时间】:2013-06-02 05:58:27 【问题描述】:

我希望将标签从 WYSIWYG 编辑器替换为 .

目前我正在使用以下代码来实现这一点。

$content = preg_replace('/<h1(.*?)<\/h1>/si', '<p class="heading-1"$1</p>', $content);
$content = preg_replace('/<h2(.*?)<\/h2>/si', '<p class="heading-2"$1</p>', $content);
$content = preg_replace('/<h3(.*?)<\/h3>/si', '<p class="heading-3"$1</p>', $content);
$content = preg_replace('/<h4(.*?)<\/h4>/si', '<p class="heading-4"$1</p>', $content);
$content = preg_replace('/<h5(.*?)<\/h5>/si', '<p class="heading-5"$1</p>', $content);
$content = preg_replace('/<h6(.*?)<\/h6>/si', '<p class="heading-6"$1</p>', $content);

如您所见,这段代码相当混乱,如果我能将其压缩成一个正则表达式就好了,但我只是缺乏这样做的能力。

我曾考虑将这行代码作为替代。

$content = preg_replace('/<h(.*?)<\/h(.*?)>/si', '<p class="heading-$2"$1</p>', $content);

我不确定是否使用上述内容,客户倾向于从其他网站复制内容,将其直接粘贴到他们的新所见即所得中,我已经看到从 hr 标签到标题标签的任何内容都出现在那里。

我需要的只是上面的单行,除了标签本身只能是2个特定字符(所以确保标签以H开头,后跟[1-6])。

我还要求它添加到 p 标签的类是特定于数字使用的,例如:heading-1、heading-2。

任何帮助将不胜感激,感谢您的宝贵时间。

【问题讨论】:

$content = preg_replace('/&lt;h([1-6])(.*?)&lt;\/h1&gt;/si', '&lt;p class="heading-$1"$2&lt;/p&gt;', $content); 玩得开心。 肯定不行,因为它期望完成 标记? 和here 是你可以做到的。使用此正则表达式,&lt;h3&gt; hello world&lt;/h4&gt; 将无法匹配。 太好了,感谢您的帮助。我现在正在使用这个,一个稍微修改过的原始版本,因为我相信我说它需要一个正确的完成标签是正确的? $content = preg_replace('//si', '

', $content);

老实说,您应该使用 html 解析器。但是,如果您对可能得到的输入有信心,那么请继续使用正则表达式。 【参考方案1】:
$content = <<<HTML
<h1 class="heading-title">test1</h1>
<H2 class="green">test2</H2>
<h5 class="red">test</h5>
<h5 class="">test test</h5>
HTML;

$content = preg_replace('#<h([1-6]).*?class="(.*?)".*?>(.*?)<\/h[1-6]>#si', '<p class="heading-$1 $2">$3</p>', $content);

echo htmlentities($content);

结果:

<p class="heading-1 heading-title">test1</p> 
<p class="heading-2 green">test2</p> 
<p class="heading-5 red">test</p> 
<p class="heading-5 ">test test</p>

现有类的注意事项: 即使您的元素没有现有的类,您也必须添加空类属性class=""。相反,这不会按预期工作。 :( 更好的解决方案是使用preg_replace_callback。然后您可以检查是否存在匹配并更准确地创建您的p tags

【讨论】:

1 不会向您的正则表达式添加任何内容,因此只需将其删除即可。 这很好用,除了它不尊重标题标签上的现有类?我现在正在使用:$content = preg_replace('/&lt;h([1-6])(.*?)&lt;\/h([1-6])&gt;/si', '&lt;p class="heading-$1"$2&lt;/p&gt;', $content); 但这也不尊重现有的类。 当然不会。为什么需要现有的类?它可能不适合p tag。无论如何,我也会编辑以添加现有的类。 抱歉,我现在明白为什么现有的类会是一项非常困难的任务。但也许还有其他需要保留的现有属性?我只是在为我的问题寻找最佳解决方案,如果这是我能完成的任务,那很好。感谢您迄今为止的帮助。 我认为这是现在最好的方法preg_replace('/&lt;h([1-6])(.*?)&lt;\/h([1-6])&gt;/si', '&lt;p class="heading-$1"$2&lt;/p&gt;', $content);它不会合并类,但它会尊重并保留元素上的任何其他属性。

以上是关于用 <p> 标签和类替换标题 (<h1>, <h2> ...) 标签的主要内容,如果未能解决你的问题,请参考以下文章

用 <p> 标签替换 textarea 中的空行并将其显示为 HTML 有效代码

怎么用js 把<p> </p> 替换为空 html = html.replace('<p> </p>'

如何替换字符串中的 \n 换行符,以便 <p> 标签可以显示换行符

javascript 正则表达式 替换 html 中的 p标签替换成BR标签

从 xhtml 文档中删除未关闭的打开 <p> 标签

C# Regex 用 <p> 替换一些 HTML 序列,用 </p> 替换一些