JS基础测试38期

Question

JS基础测试38期

Opened this issue 5 years ago · 28 comments

关于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代码写在这里
 ```

其它：

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

Answer 1 · 2019-09-25T11:30:07.000Z

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

var base64Str = btoa(encodeURI(str1))

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

Answer 2 · 2019-09-25T12:21:29.000Z

1.

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

2.

var str2 = window.btoa(str1);

3.

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

Answer 3 · 2019-09-25T12:26:32.000Z

第一题

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

第二题

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

第三题

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

Answer 4 · 2019-09-25T14:44:07.000Z

第 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);

Answer 5 · 2019-09-25T16:17:36.000Z

第一题

去除只有 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))

Answer 6 · 2019-09-26T01:43:28.000Z

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

Answer 7 · 2019-09-26T02:26:20.000Z

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')
        }
    })

let base64Str = btoa(divElement.innerHTML)

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

Answer 8 · 2019-09-26T02:30:44.000Z

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)

Answer 9 · 2019-09-26T02:39:44.000Z

  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));

Answer 10 · 2019-09-26T02:42:48.000Z

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

Answer 11 · 2019-09-26T03:07:52.000Z

    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);

Answer 12 · 2019-09-26T04:26:59.000Z

    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))

Answer 13 · 2019-09-26T05:23:21.000Z

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

Answer 14 · 2019-09-26T05:32:00.000Z

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

Answer 15 · 2019-09-26T06:12:09.000Z

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

window.btoa(str);

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

Answer 16 · 2019-09-26T07:27:11.000Z

//第一题
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);

Answer 17 · 2019-09-26T07:37:50.000Z

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)

Answer 18 · 2019-09-26T13:08:05.000Z

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)

Answer 19 · 2019-09-26T15:19:52.000Z

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)

Answer 20 · 2019-09-27T05:53:29.000Z

// 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)

Answer 21 · 2019-09-27T09:55:06.000Z

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

Answer 22 · 2019-09-27T10:22:56.000Z

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

Answer 23 · 2019-09-27T10:43:22.000Z

第一题

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

第二题

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

第三题

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

Answer 24 · 2019-09-27T12:13:05.000Z

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

Answer 25 · 2019-09-27T12:43:05.000Z

// 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)

Answer 26 · 2019-09-27T13:12:01.000Z

第一问

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

第二问

btoa(newStr)

第三问

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

Answer 27 · 2019-09-28T01:49:36.000Z

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);

Answer 28 · 2019-09-28T02:20:14.000Z

本期要点：

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