JS基础测试38期

[zhangxinxu]

关于SVG字符串处理，比较基本：

每小题2积分。

题目中的字符串如下：

var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';

答题前不要看别人回答，答题后可以，但不能修改自己回答

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式（1积分）。

```js
// 你的JS代码写在这里
 ```

其它：

1. 首位答题者可获得直播翻牌机会；
2. 本次答疑直播为9月28日上午10:00，大约30分钟；

[fzpijl]

1.

var reg1 = /fill="([^"]*)"/g
var str1 = str.replace(reg1, function(m){
    if(m === 'fill="none"'){
        return 'fill="none"'
    }
    return ''
})

2.

var base64Str = btoa(encodeURI(str1))

3.

var reg3 = /[%#}{<>]/g
var str3 = str1.replace(reg3, function(m){
    return encodeURI(m)
})

[XboxYan]

1.

var str1 = str.replace(/fill="(?!none")[^"]+"/g,"");

2.

var str2 = window.btoa(str1);

3.

var str3 = str1.replace(/[%#{}<>]/g, encodeURI);

[liyongleihf2006]

第一题

str = str.replace(/fill\s*=\s*\"\s*(?!none)[^"]*\s*\"/g,"");
console.log(str);

第二题

console.log(window.btoa(str));

第三题

console.log(str.replace(/["%#{}<>]/g,encodeURI));

[wingmeng]

第 1 题：

// 方法1：利用 RegExp 的零宽断言
str = str.replace(/fill="(?!none)[^"]+"/gi, '');

// 方法2：先用 RegExp 通用判断，然后 replace 函数进一步判断
str = str.replace(/fill="([^"]+)"/gi, function($0, $1) {
  return $1.toLowerCase() === 'none' ? $0 : '';
});

第 2 题：

接第 1 题

window.btoa(str)

第 3 题：

接第 1 题

var reg_encodeChars = new RegExp('["%#{}<>]', 'g');
str = str.replace(reg_encodeChars, encodeURIComponent);

[livetune]

第一题

去除只有 fill 和 fill 不为 none 的属性

  const noFillStr = str.replace(/fill\s*\=\s*"(.*?)"/g, (str, $1) => $1 !== 'none' ? '' : str).replace(/\s+(fill)\s+/,' ')
  console.log(noFillStr)

第二题

  const base64Str = btoa(noFillStr)
  console.log(base64Str)

第三题

  const encodeStr = noFillStr.replace(/(\"|\%|\#|\{|\}|\<|\>)/g, s => encodeURIComponent(s))
  // 或者
  const encodeStr = noFillStr.replace(/["%#{}<>"]/g, s => encodeURIComponent(s))

[sghweb]

//第一题 let reg = /fill=\"[^(none)]*?\"/g str = str.replace(reg,"") //第二题 btoa(str) //第三题 str = str.replace(/[\"{}<>%#]/g,encodeURI)

[frankyeyq]

1.

let divElement = document.createElement('div')
    divElement.innerHTML = str
    divElement.childNodes[0].childNodes.forEach(child => {
        console.log(child)
        let fill = child.getAttribute('fill')
        if (fill) {
            child.removeAttribute('fill')
        }
    })

2. let base64Str = btoa(divElement.innerHTML)

3. divElement.innerHTML.replace(/["%#{}<>]/g, encodeURI)

[xxf1996]

var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';

// 第一题
let t1 = str.replace(/\sfill="none"/g, '')
// 第二题
let t2 = btoa(t1)
// 第三题
let t3 = t1.replace(/["%#{}<>]/g, encodeURIComponent)

[smileyby]

  var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';

  // 第一题 
  str = str.replace(/fill="[^(none)]*"/g, '');

  // 第二题
  var base64 = btoa(str);

  // 第三题
  var encodeStr = str.replace(/["%#{}<>]/g, s1 => encodeURI(s1));

[JaimeCheng]

// 1
var str1 = str.replace(/fill="(?!none)[^"]+"/g, '')
// 2
var str2 = window.btoa(str1)
// 3
不是很会

[guqianfeng]

    var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';
    str1 = str.replace(/fill="([^"]+)"/g, function(kv, v){
        return v === "none" ? kv: "";
    });
    console.log(str1);

    str2 = btoa(str1);
    console.log(btoa(str));

    str3 = str1.replace(/[%#{}<>]/g, encodeURI);
    console.log(str3);

[les-lee]

    var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';
    var firstAnswerRes = str.replace(/fill="[^(none)]+"/g, '')
    // 1.
    console.log(firstAnswerRes)
    // 2.
    console.log(btoa(firstAnswerRes))
    // 3.
    function urlEncodeChar(data) {
      var data = firstAnswerRes.replace(/(")|(%)|(#)|(\{)|(\})|(<)|(>)/g, function (match, index, input) {
        if (!match) {
          return match
        }
        return encodeURI(match)
      })
      return data
    }
    console.log(urlEncodeChar(firstAnswerRes))

[asyncguo]

// 1. 
str = str.replace(/[\s]+fill=(?!"none")[^\s\/\>]+/g, '')
//2. 
window.btoa(str)
// 3.
str.replace(/["%#{}<>]/g, encodeURI)

[rayj1993]

// 第一题
str.replace(/fill="(?!none")[^"]+"/g, "");
// 第二题
window.btoa(str);
// 第三题
str.replace(/["%#{}<>]/g, encodeURI);

[NeilChen4698]

1.

str = str.replace(new RegExp(' fill[ ]?=[ ]?(?:(?:\"(.*?)\")|(?:\'(.*?)\'))','ig'), function(str, group) {
    return group !== 'none' ? '' : str;
});

2.

window.btoa(str);

3.

str = str.replace(new RegExp('["%#{}<>]','g'), encodeURIComponent);

[silverWolf818]

//第一题
var str1 = str.replace(/fill="([^"]+)"/gi,function (match,p) {
    return p === "none" ? match : '';
});

• 这里可以参看张老师之前写的一篇文章原来浏览器原生支持JS Base64编码解码
  • mdn官方文档window.btoa

    //第二题
    var str2  = window.btoa(str1);

    //第三题
    var str3 = str1.replace(/[,%#{}<>]/g,encodeURI);

[hangfengnice]

1.
let str1 = str.replace(/fill="([^"]+)"/g, function (match, $1) {
     return $1 === 'none' ? match : ""
   })

2.
let encodeData = window.btoa(str)

3.
let encodeStr = str.replace(/["%{}<>]/g, encodeURIComponent)

[zy017]

var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';
// 1.
var transSvgStr = function(str) {
  var parentDoc = document.createElement('div')
  parentDoc.innerHTML = str
  var list = parentDoc.querySelectorAll('[fill]')
  list.forEach(e => {
    if (e.getAttribute('fill') !== 'none') {
      e.removeAttribute('fill')
    }
  })
  return parentDoc.innerHTML
}

var newStr = transSvgStr(str)
console.log(newStr)

//2.
var base64Str = btoa(newStr)
console.log(base64Str)

//3.
var encodeStr = newStr.replace(/["%#{}<>]/g, encodeURI)
console.log(encodeStr)

[Seasonley]

var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';

//zxx: 如果fill="null"也应该被替换
str=str.replace(/ fill="[^n"]+"/g ,'');

btoa(str);

str.replace(/["%#{}<>]/g, encodeURI)

[Despair-lj]

// 1
// 如果只是根据题目给出的 str 可以使用简单的正则匹配
var str1 = str.replace(/fill=\"#\w+\"/g, '');
// 或者是使用零宽断言
var str1_1 = str.replace(/fill=\"(?!none)#?\w+\"/g, '')
// 2
var str2 = window.btoa(str1)
// 3
var str3 = str1.replace(/["%#{}<>]/g, encodeURI)

[GCGligoudan]

// 1.
var str1 = str.replace(/fill="(?!none")[^"]+"/g, "");
// 2.
var str2 = window.btoa(str1);
// 3.
var str3 = str.replace(/["%#{}<>]/g, encodeURI);

[ziven27]

不好意思，张老师我这个没有时间做了。打个卡。

[lifelikejuly]

• 第一题

  var newStr = str.replace('/fill="[^(none)]*?"/g', "")
  console.log(newStr);

• 第二题

  console.log(window.btoa(newStr));

• 第三题

  console.log(newStr.replace(/["%#{}<>]/g, encodeURI));

[dengjiarong1225]

// 第一题
const str1 = str.replace(/fill="(?!none)[^"]+"/g, '');
// 第二题
const str2 = window.btoa(str1);
// 第三题
const str3 = str1.replace(/[,%${}<>]/g, encodeURI)

[ghost]

// 1
var removeFill = (string) => {
    let temp = string.split('/>').join(' ').split(' ')
    for (let i = 0; i < temp.length; i++) {
        const strs = temp[i];
        if (strs.startsWith('fill=') && strs.includes('#')) {
            temp[i] = '/>'
        }
    }
    return temp.join(' ')
}
let s1 = removeFill(str)
// 2
let s2 = window.btoa(s1)
// 3
let s3 = encodeURIComponent(s1)

[zengqingxiao]

第一问

let newStr = str.replace(/fill="(?!none")[^"]+"/g, "")

第二问

btoa(newStr)

第三问

str.replace(/["%#{}<>]/g, encodeURI)

[juzhiqiang]

demo

  var str = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 2a1 1 0 0 1 1-1h13a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2z" fill="#0067E6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6a1 1 0 0 1 1-1h9l5 5v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V6z" fill="#FEAEA5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17 5l5 5h-4a1 1 0 0 1-1-1V5z" fill="#0067E6"/></svg>';

  第一题
  var newStr = str.replace(/fill="none"/g, "");

  第二题
  var bit = window.btoa(newStr);

  第三题
  var  codeStr = str.replace(/["%#{}<>]/g,encodeURI);

[zhangxinxu]

本期要点：

1. 老老实实用一个简单正则，然后callback中处理，虽然代码不是很简单，但是看得懂也不出错。简洁用法：/fill="(?!none")[^"]+"/gi。
2. window.btoa(str)可以转base64。但是如果有中文是会报错的。可以先encodeURI下，或者encodeURIComponent也可以。可以试试这个：btoa(unescape(encodeURIComponent(str)))。base64到常规格式 window.atob(str);
3. data:image/svg+xml;utf8, 加原始SVG代码是可以作为CSS background图片的，但是Chrome支持，IE浏览器不支持。我们可以部分转义，"，%，#，{，}，<，>。IE浏览器也支持，包括IE9。str.replace(/[%#{}<>]/g, encodeURI)。