xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

svg & regex

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

https://regexper.com/#%2F^<svgs%5Cw%5Cs*%3E%24%2Fi

// const reg  = /^<svgs*w*s*>$/i;

// 匹配任意字符 (s*Ss*)* 或 [sS]* ???
const reg  = /^<svg(s*Ss*)*>/i;

let svgStr = `<svg width="930px" height="471px" viewBox="0 0 930 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;

reg.test(svgStr);

svgStr.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);

js 正则表达式匹配任意字符

---

SVG

svg = `<?xml version="1.0" encoding="UTF-8"?>
<svg width="930px" height="471px" viewBox="0 0 930 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
    <title>test</title>
</svg>`;

viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 100">`;

xml = /<?xml[sS]*?>/i;

result = ``;

result = svg.replace(xml,``);

console.log(`
result`, result);

index = result.indexOf(`>`);

console.log(`
index`, index);

result = result.substr(index + 1);

console.log(`
result`, result);

result = viewport + result;

console.log(`
viewport=
`, result);
// console.log(`
%cviewport=
`, `color: red;`, result);

// 思路：??? first "> ??? index
/*

1. replace xml
2. indexOf > ??? first

*/

https://repl.it/@xgqfrms/svg-regex

XML

reg = /[sS]*(^<svg(s*Ss*)*>$)/i;

str = ` <?xml version="1.0" encoding="UTF-8"?>
<svg width="930px" height="471px" viewBox="0 0 930 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
    <title>test</title>
</svg>`;

reg.test(str);
// true

abc = str.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 100">`);
// str.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);

console.log(`abc`, abc);

r = /^[sS]*<svg(s*Ss*)*>$/i;

s = `xml <svg xxx> xyz`

a = s.replace(r, `<svg width="100%" height="100%" viewBox="0 0 1000 100">`);

console.log(`a`, a);

error

OK

---