Fix regex for css property url extraction

When there are parentheses in the pattern it would match incorrectly. Cherry-picked from PR#204

Author: IDisposable

README.md

@@ -404,7 +404,8 @@ DOLCIMASCOLO (packaging), Zee (ZM) @zm-cttae (many major updates), Joshua Walsh
 (useCredentialsFilters), Aravind @codesculpture (fix overridden props), Shi Wenyu @cWenyu
 (shadow slot fix), David Burns @davidburns573 and Yujia Cheng @YujiaCheng1996 (font copy
 optional), Julien Dorra @juliendorra (documentation), Sean Zhang @SeanZhang-eaton (regex
-fixes)
+fixes), Ludovic Bouges @ludovic (style property filter), Roland Ma @RolandMa1986 (URL
+regex)"
 
 ## License
 

package.json

@@ -70,7 +70,9 @@
         "David Burns @davidburns573",
         "Yujia Cheng @YujiaCheng1996",
         "Julien Dorra @juliendorra",
-        "Sean Zhang @SeanZhang-eaton"
+        "Sean Zhang @SeanZhang-eaton",
+        "Ludovic Bouges @ludovic",
+        "Roland Ma @RolandMa1986"
     ],
     "license": "MIT",
     "bugs": {

spec/dom-to-image-more.spec.js

@@ -761,9 +761,14 @@
         describe('inliner', function () {
             const NO_BASE_URL = null;
 
+            it('should process urls', function () {
+                const should = domtoimage.impl.inliner.shouldProcess;
+                assert.deepEqual(should('url("http://acme.com/file")'), true);
+                assert.deepEqual(should('nope("http://acme.com/file")'), false);
+            });
+
             it('should parse urls', function () {
                 const parse = domtoimage.impl.inliner.impl.readUrls;
-
                 assert.deepEqual(parse('url("http://acme.com/file")'), [
                     'http://acme.com/file',
                 ]);
@@ -776,10 +781,35 @@
 
             it('should ignore data urls', function () {
                 const parse = domtoimage.impl.inliner.impl.readUrls;
-
                 assert.deepEqual(parse('url(foo.com), url(data:AAA)'), ['foo.com']);
             });
 
+            it('should build a decent escaped regex urls', function () {
+                const regexer = domtoimage.impl.inliner.impl.urlAsRegex;
+
+                one('http://foo.com', 'url("http://foo.com")', '"');
+                one('http://foo.com', "url('http://foo.com')", "'");
+                one('http://foo.com', 'url(http://foo.com)', '');
+                one(
+                    'http://foo.com',
+                    'url("http://bar.org") and url(\'http://foo.com\')',
+                    "'"
+                );
+                one('https://example.org', 'url(ping.png)', null);
+
+                function one(input, css, expectation) {
+                    const pattern = regexer(input);
+                    const findings = pattern.exec(css);
+                    //console.log({ pattern: pattern.toString(), input, css, findings, expectation});
+
+                    if (findings) {
+                        assert.deepEqual(findings.slice(1, 3), [expectation, input]);
+                    } else {
+                        assert.isNull(expectation);
+                    }
+                }
+            });
+
             it('should inline url', function (done) {
                 const inline = domtoimage.impl.inliner.impl.inline;
 

src/dom-to-image-more.js

@@ -1035,14 +1035,15 @@
     }
 
     function newInliner() {
-        const URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+        const URL_REGEX = /url\((["']?)((?:\\?.)*?)\1\)/gm;
 
         return {
             inlineAll: inlineAll,
             shouldProcess: shouldProcess,
             impl: {
                 readUrls: readUrls,
                 inline: inline,
+                urlAsRegex: urlAsRegex,
             },
         };
 
@@ -1054,29 +1055,27 @@
             const result = [];
             let match;
             while ((match = URL_REGEX.exec(string)) !== null) {
-                result.push(match[1]);
+                result.push(match[2]);
             }
             return result.filter(function (url) {
                 return !util.isDataUrl(url);
             });
         }
 
+        function urlAsRegex(urlValue) {
+            return new RegExp(`url\\((["']?)(${util.escape(urlValue)})\\1\\)`, 'gm');
+        }
+
         function inline(string, url, baseUrl, get) {
             return Promise.resolve(url)
                 .then(function (urlValue) {
                     return baseUrl ? util.resolveUrl(urlValue, baseUrl) : urlValue;
                 })
                 .then(get || util.getAndEncode)
                 .then(function (dataUrl) {
-                    return string.replace(urlAsRegex(url), `$1${dataUrl}$3`);
+                    const pattern = urlAsRegex(url);
+                    return string.replace(pattern, `url($1${dataUrl}$1)`);
                 });
-
-            function urlAsRegex(urlValue) {
-                return new RegExp(
-                    `(url\\(['"]?)(${util.escape(urlValue)})(['"]?\\))`,
-                    'g'
-                );
-            }
         }
 
         function inlineAll(string, baseUrl, get) {