url()处理超出范围

[dvien]

问题描述？

url()处理超出范围

重现步骤

wxml:

<view class="content">
    <view style="{{'background:'+('url('+'https://img.alicdn.com/imgextra/i4/688637912/O1CN01Jtw5BM28JkGuK0AbI_!!688637912.png'+') no-repeat center center rgba(0,0,0,.5);')+';'}}">
        测试url()
    </view>
</view>

转vue

<template>
    <view class="content">
        <view :style="'background:'+('url(+'https://img.alicdn.com/imgextra/i4/688637912/O1CN01Jtw5BM28JkGuK0AbI_!!688637912.png'+) no-repeat center center rgba(0,0,0,.5);')">
            测试url()
        </view>
    </view>
</template>

期望的结果

<template>
    <view class="content">
        <view :style="'background:'+('url('+'https://img.alicdn.com/imgextra/i4/688637912/O1CN01Jtw5BM28JkGuK0AbI_!!688637912.png'+') no-repeat center center rgba(0,0,0,.5);')">
            测试url()
        </view>
    </view>
</template>

问题追查：

url()里的单引号被替换掉了： 见相关源码行： .replace(/url\(['"]([^'"].*?)['"]\)/g, "url($1)")

相关源码：

    /**
     * 解析wxml前，对它进行预处理
     * @param {*} code
     * @returns
     */
    beforeParseWxml(code) {
        /**
         * fix gogocode parse error with `<!--  加载搜索栏 ---->`
         * gogocode 暂时未修复，先这么搞！20211213
         */
        code = code.replace(/\<!-{2,}\s*(.*?)\s*-{2,}\>/g, '<!-- $1 -->')

        code = code.replace(/url\(\s*\\?['"]\s*\{\{(.*?)\}\}\s*\\?['"]\s*\)/g, "url({{$1}})")
            .replace(/url\(['"]([^'"].*?)['"]\)/g, "url($1)") // 问题在这里！！！！！！！！
            .replace(/\s*\|\|\s*00\}\}/g, " || '00'}}")   //为了稍微精确一点
            .replace(/\s*==\s*00\s*(\}\}|&&)/g, " == '00' $1")  //为了稍微精确一点  TODO: 后面还是挑出来使用ast替换吧
            .replace(/\\"/g, `&quot;`) //使用特定字符替换掉引号，以便gogocode可以顺利解析
            .replace(/\b\s?<\s?\b/g, " < ") //在<前后添加空格，以便gogocode可以顺利解  TODO: 如果在注释里,会被误替换,不过问题不大

        return code

    }

临时解决：

判断url前面的字符是否为单引号

.replace(/([^'])url\(['"]([^'"].*?)['"]\)/g, "$1url($2)")