JS基础测试38期 #45

zhangxinxu · 2019-09-25T10:45:50Z

关于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分钟；

fzpijl · 2019-09-25T11:30:07Z

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

XboxYan · 2019-09-25T12:21:29Z

1.

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

2.

var str2 = window.btoa(str1);

3.

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

liyongleihf2006 · 2019-09-25T12:26:32Z

第一题

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 · 2019-09-25T14:44:07Z

第 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 · 2019-09-25T16:17:36Z

第一题

去除只有 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 · 2019-09-26T01:43:28Z

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

frankyeyq · 2019-09-26T02:26:20Z

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)

xxf1996 · 2019-09-26T02:30:44Z

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 · 2019-09-26T02:39:44Z

  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 · 2019-09-26T02:42:48Z

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

guqianfeng · 2019-09-26T03:07:52Z

    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 · 2019-09-26T04:26:59Z

    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 · 2019-09-26T05:23:21Z

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

rayj1993 · 2019-09-26T05:32:00Z

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

NeilChen4698 · 2019-09-26T06:12:09Z

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

window.btoa(str);

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

silverWolf818 · 2019-09-26T07:27:11Z

//第一题
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 · 2019-09-26T07:37:50Z

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 · 2019-09-26T13:08:05Z

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 · 2019-09-26T15:19:52Z

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 · 2019-09-27T05:53:29Z

// 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 · 2019-09-27T09:55:06Z

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

ziven27 · 2019-09-27T10:22:56Z

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

lifelikejuly · 2019-09-27T10:43:22Z

第一题

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

第二题

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

第三题

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

dengjiarong1225 · 2019-09-27T12:13:05Z

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

ghost · 2019-09-27T12:43:05Z

// 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 · 2019-09-27T13:12:01Z

第一问

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

第二问

btoa(newStr)

第三问

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

juzhiqiang · 2019-09-28T01:49:36Z

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 · 2019-09-28T02:20:14Z

本期要点：

老老实实用一个简单正则，然后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)。

JaimeCheng mentioned this issue Sep 26, 2019

JS基础测试38 - 正则匹配 JaimeCheng/zxx-quiz-summary#13

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS基础测试38期 #45

JS基础测试38期 #45

zhangxinxu commented Sep 25, 2019 •

edited

Loading

fzpijl commented Sep 25, 2019

XboxYan commented Sep 25, 2019

liyongleihf2006 commented Sep 25, 2019

wingmeng commented Sep 25, 2019

livetune commented Sep 25, 2019

sghweb commented Sep 26, 2019

frankyeyq commented Sep 26, 2019

xxf1996 commented Sep 26, 2019

smileyby commented Sep 26, 2019

JaimeCheng commented Sep 26, 2019

guqianfeng commented Sep 26, 2019

les-lee commented Sep 26, 2019

asyncguo commented Sep 26, 2019

rayj1993 commented Sep 26, 2019 •

edited by zhangxinxu

Loading

NeilChen4698 commented Sep 26, 2019

silverWolf818 commented Sep 26, 2019

hangfengnice commented Sep 26, 2019

zy017 commented Sep 26, 2019

Seasonley commented Sep 26, 2019 •

edited by zhangxinxu

Loading

Despair-lj commented Sep 27, 2019

GCGligoudan commented Sep 27, 2019

ziven27 commented Sep 27, 2019

lifelikejuly commented Sep 27, 2019

dengjiarong1225 commented Sep 27, 2019

ghost commented Sep 27, 2019

zengqingxiao commented Sep 27, 2019

juzhiqiang commented Sep 28, 2019 •

edited

Loading

zhangxinxu commented Sep 28, 2019

JS基础测试38期 #45

JS基础测试38期 #45

Comments

zhangxinxu commented Sep 25, 2019 • edited Loading

fzpijl commented Sep 25, 2019

XboxYan commented Sep 25, 2019

liyongleihf2006 commented Sep 25, 2019

wingmeng commented Sep 25, 2019

第 1 题：

第 2 题：

第 3 题：

livetune commented Sep 25, 2019

第一题

sghweb commented Sep 26, 2019

frankyeyq commented Sep 26, 2019

xxf1996 commented Sep 26, 2019

smileyby commented Sep 26, 2019

JaimeCheng commented Sep 26, 2019

guqianfeng commented Sep 26, 2019

les-lee commented Sep 26, 2019

asyncguo commented Sep 26, 2019

rayj1993 commented Sep 26, 2019 • edited by zhangxinxu Loading

NeilChen4698 commented Sep 26, 2019

silverWolf818 commented Sep 26, 2019

hangfengnice commented Sep 26, 2019

zy017 commented Sep 26, 2019

Seasonley commented Sep 26, 2019 • edited by zhangxinxu Loading

Despair-lj commented Sep 27, 2019

GCGligoudan commented Sep 27, 2019

ziven27 commented Sep 27, 2019

lifelikejuly commented Sep 27, 2019

dengjiarong1225 commented Sep 27, 2019

ghost commented Sep 27, 2019

zengqingxiao commented Sep 27, 2019

juzhiqiang commented Sep 28, 2019 • edited Loading

zhangxinxu commented Sep 28, 2019

zhangxinxu commented Sep 25, 2019 •

edited

Loading

rayj1993 commented Sep 26, 2019 •

edited by zhangxinxu

Loading

Seasonley commented Sep 26, 2019 •

edited by zhangxinxu

Loading

juzhiqiang commented Sep 28, 2019 •

edited

Loading