Question

我正在使用以下php函数（在wordpress中）向所有图像链接添加数据属性：

function ccd_fancybox_image_attribute( $content ) {
       global $post;
       $pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replace = '<a$1href=$2$3.$4$5 data-type="image" data-fancybox="image">';
       $content = preg_replace( $pattern, $replace, $content );
       return $content;
}
add_filter( 'the_content', 'ccd_fancybox_image_attribute' );

这样可以正确更改链接，如下所示：

<a href="image.jpg"><img src="image.jpg"></a>

对此：

<a href="image.jpg" data-type="image" data-fancybox="image"><img src="image.jpg"></a>

但是，此代码还会错误地影响链接到PDF文件的图像，奇怪地将数据属性添加到图像本身，而不是链接。例如，这样的PDF链接：

<a href="file.pdf"><img src="image.jpg"></a>

变成这样：

<a href="file.pdf"><img src="image.jpg" data-type="image" data-fancybox="image"></a>

我几乎不了解正则表达式，所以我不确定如何调整它。如何修复该代码，使其仅适用于图像文件的链接，而不适用于PDF的链接。

谢谢！

Answer 1

您的正则表达式匹配<a href="和文件扩展名之间的所有内容。就您而言，它匹配“ file.pdf“>

我想您可以通过将正则表达式更新为以下方式来解决当前的问题：

<a(.*?)href=('|\")([^\>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>

要详细了解该方法的工作方式和原因，而其他方法则无效，请参见https://regexr.com/3vcgk

但是，请注意，由于html不是正则，因此更多此类事情最终将再次发生，这使正则表达式成为解决此类问题的众所周知的不稳定解决方案。另请参见this answer。

正则表达式可将数据属性添加到所有图像链接

1 个答案: