svg & regex

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

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

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

// 匹配任意字符 (\s*\S\s*)* 或 [\s\S]* ???
const reg = /^<svg(\s*\S\s*)*>/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[\s\S]*\?>/i; result = ``; result = svg.replace(xml,``); console.log(`\nresult`, result); index = result.indexOf(`>`); console.log(`\nindex`, index); result = result.substr(index + 1); console.log(`\nresult`, result); result = viewport + result; console.log(`\nviewport=\n`, result);
// console.log(`\n%cviewport=\n`, `color: red;`, result); // 思路:??? first "> ??? index
/* 1. replace xml
2. indexOf > ??? first */

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

XML



reg = /[\s\S]*(^<svg(\s*\S\s*)*>$)/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 = /^[\s\S]*<svg(\s*\S\s*)*>$/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


svg & regex的更多相关文章

  1. 如何将svg转换为xaml

    原文:如何将svg转换为xaml 1 下载Inkscape 2 用Inkscape打开svg,另存为xaml 注意:复杂的svg图转换完会出现类似下面的xaml,wpf/silverlight是无法解 ...

  2. 迁移桌面程序到MS Store(11)——应用SVG图标

    在传统桌面程序中,对图标的使用大多是直接嵌入JPG或者PNG的图片.在祖传的1366x768分辨率下,并没有什么问题.相对于手机硬件的突飞猛进,也侧面反映了PC行业的落寞和桌面程序开发的不思进取.用3 ...

  3. SVG & convert polygon/polyline to path

    SVG & convert polygon/polyline to path SVG Polygon/Polyline to Path Converter https://codepen.io ...

  4. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  5. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  6. REGEX例子

    作为REGEX的例子,代码9.3显示了一个给定的文件有多少行,具有给定的模式,通过命令行输入(注:有更有效率的方式来实现这个功能,如Unix下的grep命令,在这里只是给出了另一种方式).这个程序像下 ...

  7. SVG:textPath深入理解

    SVG的文本可以沿着一条自定义的Path来排布,比如曲线.圆形等等,使用方式如下所示(来源MDN): <svg viewBox="0 0 1000 300" xmlns=&q ...

  8. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  9. .net正则表达式大全(.net 的 System.Text.RegularExpressions.Regex.Match()方法使用)

    正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串.正则表达式无疑是处理文本最有力的工具,而.NET的System.dll类库提供的System.Text.RegularExpression ...

随机推荐

  1. 洛谷 P4999

    题目链接: P4999 烦人的数学作业 题目大意 详见题目 solution 有一个显而易见的结论 发现 \(ans_{l, r} = ans_{1. r} - ans_{1, l - 1}\) 那只 ...

  2. Linux提权常用漏洞速查表

    漏洞列表 #CVE #Description #Kernels CVE–2018–18955 [map_write() in kernel/user_namespace.c allows privil ...

  3. Docker及其使用思维导图

    学习Docker的使用. 包括Docker的一些命令,Docker容器的使用,Docker镜像的使用,Docker容器连接等内容. 各种思维导图下载地址 Docker使用思维导图及各各种命令 Dock ...

  4. OpenStack (horizon Web管理界面)

    horizon 简介 Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , 管理员可以使用通过 WE ...

  5. nginx教程<一>

    2020最新Nginx教程全面讲解教程,感觉讲的很不错但是需要有docker基础,因为是基于docker快速搭建的nginx. 1.为什么要学习Nginx 肯定是工作和业务需求催生的学习需要哈哈,不过 ...

  6. [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1)

    [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 目录 [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(1) 0x00 摘要 ...

  7. 500行SQL快速实现UCF

    写在前面话 UCF通常是User-base Collaborative Filter的简写;大体的算法思路是根据用户行为计算相似群体(邻居),为用户推荐其邻居喜好的内容:感觉是不是很简单.那废话不多说 ...

  8. hdu5790 Prefix(Trie树+主席树)

    Problem Description Alice gets N strings. Now she has Q questions to ask you. For each question, she ...

  9. hdu5637 Transform (bfs+预处理)

    Problem Description A list of n integers are given. For an integer x you can do the following operat ...

  10. Codeforces Round #660 (Div. 2) Uncle Bogdan and Country Happiness dfs

    题目链接:Uncle Bogdan and Country Happiness 题意: t组输入,每组数据输入如下 首先一个n代表有n个城市,所有城市总人数为m,后面输入pi表示第i个城市的居住人数, ...