JavaScript Regex 图像搜索需要要求图像标签中存在 CSS 类名

Question

下面的 JavaScript 函数是 WordPress MCEditor WYSIWYG 编辑器插件的一部分。

它在帖子文本编辑器中搜索以下格式的图像:

<p><img src="http://test.dev/primary.jpg" class="mceItem code_syntax_highlighter" data-sh-attr="%20type%3D%22primary%22%20header%3D%22header-text%22%20footer%3D%22footer-text%22" data-sh-content="code-here" data-mce-resize="false" data-mce-placeholder="1" data-mce-src="http://test.dev/primary.jpg"></p>

然后将它们替换为:

[code_syntax_highlighter type="primary" header="header-text" footer="footer-text"]code-here[/code_syntax_highlighter]

问题是下面的正则表达式当前匹配 <p> 内的任何图像。标签。

我需要将其修改为仅匹配具有匹配 CSS 类名 = code_syntax_highlighter 的图像

因此，如果图像没有 CSS 类 code_syntax_highlighter那么下面的 JavaScript 中就不会进行匹配和替换。

如何修改正则表达式以要求存在此 CSS 类？

function restoreShortcodes2( content ) {
    return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
        var data1 = getAttr( image, 'data-sh-attr' );
        var con = getAttr( image, 'data-sh-code' );

        if ( data1 ) {
            return '<p>[' + short_code_tag + data1 + ']' + con + '[/'+short_code_tag+']</p>';
        }
        return match;
    });
}

Answer 1

用这个替换你的正则表达式

/(<img(\s*(?:\w+=".*")* class=".*code_syntax_highlighter.*" (?:\w+=".*")*)\/*>)/g

应该是

function restoreShortcodes2( content ) {
    return content.replace(/(<img(\s*(?:\w+=".*")* class=".*code_syntax_highlighter.*" (?:\w+=".*")*)\/*>)/g , function( match, image ) {
        var data1 = getAttr( image, 'data-sh-attr' );
        var con = getAttr( image, 'data-sh-code' );

        if ( data1 ) {
            return '<p>[' + short_code_tag + data1 + ']' + con + '[/'+short_code_tag+']</p>';
        }
        return match;