How to replace img src and link href in a document with a mustache expression?

Question

I trying to replace the src,href value but with a small modified using regex

Simple example

//Find:
<img src="icons/google-icon.svg" > 
//Replace to: 
<img src="{{asset('icons/google-icon.svg')}}" >

//Find:
<link href="css/style.css"> 
//Replace to: 
<link href="{{asset('css/style.css')}}">
/** etc... */

Now this is my regex:

//Find:
src\s*=\s*"(.+?)" 
//Replace to:
src="{{ asset('$1') }}"

And its work very great actually but its only for src not [href,src], also I want to exclude any value that contains {{asset

Any idea? Thanks in advance

You likely use the or in regex `|` with grouping to say `href` or `src` but you should use a parser for this. — user3783243, May 23 '20 at 02:09

Nick · Accepted Answer · 2020-05-23T03:14:26.687

1

You can use an alternation to match src or href, and then a negative lookahead to assert that the src/href doesn't start with {{asset:

((?:src|href)\s*=\s*")((?!{{\s*asset)[^"]+)

Demo on regex101

This will also change href attributes inside <a> tags or elsewhere. If that is an issue, use a DOMDocument solution instead. Note that if your HTML is not just a snippet then you don't need to add the div tag around it in the call to loadHTML and the last line should be changed to echo substr($doc->saveXML(), 38);.

$html = <<<EOT
//Find:
<img src="icons/google-icon.svg" > 
//Replace to: 
<img src="{{asset('icons/google-icon.svg')}}" >

//Find:
<link href="css/style.css"> 
//Replace to: 
<link href="{{asset('css/style.css')}}">
/** etc... */
<a href="http://www.example.com">
EOT;

$doc = new DOMDocument();
$doc->loadHTML("<div>$html</div>", LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

$xpath = new DOMXPath($doc);
foreach ($xpath->query('//img') as $img) {
    $src = $img->getAttribute('src');
    if (preg_match('/^(?!{{\s*asset).*$/', $src, $m)) {
        $img->setAttribute('src', "{{asset('" . $m[0] . ")'}}");
    }
}

foreach ($xpath->query('//link') as $link) {
    $href = $link->getAttribute('href');
    if (preg_match('/^(?!{{\s*asset).*$/', $href, $m)) {
        $link->setAttribute('href', "{{asset('" . $m[0] . ")'}}");
    }
}

// strip XML header and added <div> tag
echo substr($doc->saveXML(), 44, -6);

Output:

//Find:
<img src="{{asset('icons/google-icon.svg)'}}"/> 
//Replace to: 
<img src="{{asset('icons/google-icon.svg')}}"/>

//Find:
<link href="{{asset('css/style.css)'}}"/> 
//Replace to: 
<link href="{{asset('css/style.css')}}"/>
/** etc... */
<a href="http://www.example.com"/>

Demo on 3v4l.org

edited May 23 '20 at 03:14

answered May 23 '20 at 02:13

Nick

138,499
22
57
95

after your great work , i did a very small edit ,so if any one need to exclude another word like `asset` this is the code : `((?:src|href)\s*=\s*")((?!{{\s*(asset|anything|else))[^"]+)` – A. El-zahaby May 23 '20 at 02:31
can i ask how i also exclude the tags like `a` tag ? – A. El-zahaby May 23 '20 at 02:32
@A.El-zahaby see my edit. It's safest to use [`DOMDocument`](https://www.php.net/manual/en/class.domdocument.php) in that case because trying to match an `img` or `link` tag specifically with regex is difficult. – Nick May 23 '20 at 03:15
thanks ,, but i just want to exclude `a` tag not match `img` or `link` ,, but thanks very much , you make a great work ^_^ – A. El-zahaby May 23 '20 at 03:22
@A.El-zahaby likewise, it's very difficult to exclude a tag because of the different forms they can take e.g. ` – Nick May 23 '20 at 03:41
After a while .. Finally I came up with a solution, take a look: https://regex101.com/r/PvIqTF/1 – A. El-zahaby May 23 '20 at 04:09
`<((?!\s*((a)\s+))\w+)(.*?)((?:src|href)\s*=\s*")((?!{{\s*(asset))[^"]+)"` – A. El-zahaby May 23 '20 at 04:10
1

@A.El-zahaby I hope that will work for you. It can be fooled (for example by including a `
` tag on the same line as a `` tag). See https://regex101.com/r/PvIqTF/3
– Nick May 23 '20 at 04:17

mickmackusa · Answer 2 · 2020-05-23T06:19:36.697

Nick is correct that this can/should be done with DomDocument.

Also worth mentioning is a buggy side-effect when adding curly braces to the attribute strings (they get encoded) when using saveHTML() to access the mutated document. To workaround this, use saveXML() and just trim away the xml tag that is prepended to the document.

I am wrapping your sample tags in a parent tag so that DomDocument can function normally and not mangle your document structure. This might be an unnecessary precaution for your project.

My snippet directly targets the qualifying attributes using XPath and replaces their values without any regex. The pipe (|) in my xpath expression means "or" -- so it targets the img tags' src attribute OR the link tags' href attribute.

Code: (Demo)

$html = <<<HTML
<div>
    <img src="icons/example.svg">
    <a href="http://www.example.com">a link</a>
    <link href="css/example.css">
    <iframe src="http://www.example.com/default.htm"></iframe>
</div>
HTML;

$dom = new DOMDocument();
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
foreach ($xpath->query('//img/@src | //link/@href') as $attr) {
    $attr->value = "{{asset('" . $attr->value . "')}}";
}
echo substr($dom->saveXML(), 38);  // remove the auto-generated xml tag from the start

Output:

<div>
    <img src="{{asset('icons/example.svg')}}"/>
    <a href="http://www.example.com">a link</a>
    <link href="{{asset('css/example.css')}}"/>
    <iframe src="http://www.example.com/default.htm"/>
</div>

Whoops, I just saw the last request in your question.

The implementation of not() and starts-with() are applied to both tags to disqualify elements that are already converted to mustache code.

New xpath expression: (Demo)

//img[not(starts-with(@src,"{{asset"))]/@src | //link[not(starts-with(@href,"{{asset"))]/@href

How to replace img src and link href in a document with a mustache expression?

2 Answers2

Linked