正则表达式可视化工具

最新推荐文章于 2024-05-02 16:25:15 发布
最新推荐文章于 2024-05-02 16:25:15 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 正则表达式 文章标签： 正则表达式 可视化工具 图形

Index.html

<html>
    <head>
        <title>正则表达式图形化工具</title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <script type="text/javascript" src="js/jquery.js"></script>
    </head>
    <body>
    <style type="text/css">
        .animation-box{
            width: 600px;
            height: 400px;
        }
        .info-box{
            width: 600px;
            height: 400px;
            overflow: scroll;
        }
        .flow-chart{
            text-align: center;
        }
        .flow-chart ul{

        }
        .flow-chart ul li{
            margin-top: 5px;
            border: 1px solid red;
            padding: 5px;
            margin: 5px;
        }
        .flow-chart ul li .reg{
            background-color: #DB3434;
            color: #fff;
            padding: 5px 80px;
            font-size: 18px;
        }
        .flow-chart ul li .res{
            background-color: #146E1F;
            color: #fff;
            padding: 2px 80px;
            font-size: 18px;
            height: 18px;
            line-height: 18px;
        }
        .content{
            display: inline-block;
            vertical-align: middle;
        }
        .branch{
            display: inline-block;
            vertical-align: middle;

        }
        #source{
            width:800px;
            margin:20px auto 0;
            text-align:center; 
            margin-bottom: 5px;
        }
        #source ul li{
            margin-top: 5px;
        }
        #regexpInput,#textInput{
            width: 500px;
            height: 30px;
            border: 1px solid gray;
            padding: 0 5px;
        }
        #beginBtn{
            padding: 5px 15px;
        }
        text{
            font-size: 20px;
        }

    </style>
        <div id="source">
            <ul >
                <li>正则表达式：<input type="text" id="regexpInput"/></li>
                <li><p style="color:red;">请填入正则表达式，支持格式：<br />1，没有斜线，如：<span style="font-size:20px;">\d|\s</span> ; <br />
                2，有斜线，如：<span style="font-size:20px;">/\d|\s/</span></p></li>
                <li><p style="color:red;">点击展示按钮，将会在下方生成正则流程图；同时在控制台中将会输出该正则的数据结构。</p></li>
                <li><p style="color:red;">请在高级浏览器中运行。</p></li>
                <li style="display:none;">需要匹配的字符串：<input type="text" id="textInput"/></li>
                <li><input type="button" id="beginBtn" value="展示流程图" /></li>
            </ul>
        </div>
        <style type="text/css">
            path{
                 stroke:#000000;
                 fill:none;
                 stroke-width: 2px
            }
            rect{
                fill:#bada55;
            }
            text{
                fill:#000;
            }
            tspan{

            }
        </style>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" id="flowChart">
            <g></g>
        </svg>
        <div style="height:20px;position:fixed;top:0;left:0;text-algin:center;font-size:20px;font-weight:bold;background-color:white;" id="regFixed"></div>
    </body>
    <script type="text/javascript" src="js/require.js"></script>
    <script src="js/d3.v3.min.js" charset="utf-8"></script>
    <script src="js/dagre-d3.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <script type="text/javascript">
      require.config({
            baseUrl: "js/"
         });
        var regexpInputDom=document.getElementById('regexpInput');
        var textInputDom=document.getElementById('textInput');
        var beginBtnDom=document.getElementById('beginBtn');
        beginBtnDom.onclick=function(){
            require(['main'],function(main){
                main.init(textInputDom.value,regexpInputDom.value);
            });
        }

        $(window).scroll(function(){
            if($(this).scrollTop()>40&&$('#regexpInput').val()!==''){
                $('#regFixed').html($('#regexpInput').val()).show();
            }else{
                $('#regFixed').hide();
            }
        });
    </script>
</html>

common.css

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0}

address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
pre,code,kbd,samp,tt{font-family:monospace;line-height:100%}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}

ul,li{list-style:none}
em,.em{font-style:italic}
strong,.strong{font-weight:bold}
img{border:0;vertical-align:top;-ms-interpolation-mode:bicubic}

/*==table==*/
table{border-collapse:collapse;border-spacing:0}
caption,th{text-align:left}

/*==Form==*/
fieldset{border:none}
legend{display:none}
textarea{resize:none}
button{overflow:visible}
label,button{cursor:pointer;_cursor:hand}
input,select,textarea{font:normal normal 14px "Verdana";color:#333;outline:none;/*去除Opera浏览器这些标签的默认样式*/}
textarea,input[type|="text"],input[type|="password"]{-webkit-appearance:none/*去除webkit浏览器这些标签的默认样式*/}
abbr[title],
acronym[title]{border-bottom:1px dotted;cursor:help}
input[type="hidden"]{display:none!important}

/*==h1~h6==*/
h1,.h1{font-size:18px;font-weight:bold}
h2,.h2{font-size:16px;font-weight:bold}
h3,.h3{font-size:14px;font-weight:bold}
h4,.h4{font-size:14px;font-weight:normal}
h5,.h5{font-size:12px;font-weight:normal}
h6,.h6{font-size:12px;font-weight:normal}

/* 字体大小*/
.f12px{font-size:12px}
.f14px{font-size:14px}

/* 浮动*/
.fl{float:left}
.fr{float:right}

/*==通用链接==*/
a{color:#333;text-decoration:none;outline:none}
a:hover{text-decoration:underline;outline:none}
.blod a,.blod{font-weight:bold}

/* 其它属性*/
.center{text-align:center}
.mid{vertical-align:middle}
.hide{display:none}
.submit{cursor:pointer;border:0}

/*==collr==*/
.collr,.collr .colr{overflow:hidden;zoom:1}
.collr .coll{float:left;_margin-right:-3px}
.collr .coll img{vertical-align:top}

.p-collr{position:relative;zoom:1}
.p-collr .coll{position:absolute;left:0;top:0}
.p-collr .colr{zoom:1}

/*==clear==*/
.clear{clear:both;font-size:0px;width:0px;height:0;visibility:hidden;line-height:0}
.clearfix{*zoom:1}
.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden}

body{background-color:#FFF;font:12px/22px Arial,Tahoma,Verdana,"\5B8B\4F53";color:#333}

main.js

define('main', ['draw', 'meta', 'NFA'], function(draw, meta, NFA) {
    function init(inputStr, regexpStr) {
        if (regexpStr === '') {
            return;
        } else if (/^\//.test(regexpStr) && /(?:\/|\/i|\/g|\/m)$/.test(regexpStr)) {
            regexpStr = regexpStr.replace(/^\//, '').replace(/(\/|\/i|\/g|\/m)$/, '');
        }
        try {
            var reg = new RegExp(regexpStr);
        } catch (e) {
            alert(e);
        }
        var metas = [];
        meta(regexpStr, metas, 1);
        console.log('该正则表达式的生成数据结构如下：');
        console.log(metas);
        var obj = document.getElementById('flowChart');
        draw.drawModel(metas, obj);
        //NFA(inputStr, meta, showMatch);
    }
    return {
        init: init
    }
});

draw.js

define('draw', ['description'], function(des) {

    /*var getBreadth=function(arr){
        var breadth=arr.length;
        var tempBreadth=0;
        for(var i=0,len=arr.length;i<len;i++){
            tempBreadth=0;

        }
    };*/
    var obj = {
        drawModel: function(arr) {
            var g = new dagreD3.graphlib.Graph().setGraph({});
            g.setGraph({
                nodesep: 70,
                ranksep: 50,
                rankdir: "LR",
                marginx: 20,
                marginy: 20
            });
            var preNodes = [];
            var depth = [];
            var topIndex = 0;
            // node命名规则 'node'+顶级index+深度+分支号+名称+随机数
            function drawBranch(branchArr, curPreNodes, type, operator) {
                //type = type ? type : '分支';
                depth.push(1);
                var curNodeName = '';
                var bPreNodes = [];
                var len = depth.length;


                if (type) {
                    preNodes = curPreNodes;
                    curNodeName = 'node' + topIndex + depth.length + 't' + 's' + Math.random();
                    g.setNode(curNodeName, {
                        label: '进入' + type
                    });
                    if (type === '捕获分组') {
                        g.node(curNodeName).style = "fill:#3B639F";
                    } else if (type === '非捕获分组') {
                        g.node(curNodeName).style = "fill:#f5f8fc";
                    } else if (type === '肯定环视') {
                        g.node(curNodeName).style = "fill:#10c2ce";
                    } else if (type === '否定环视') {
                        g.node(curNodeName).style = "fill:#BBFFFF";
                    }
                    preNodes.forEach(function(nodeName) {
                        g.setEdge(nodeName, curNodeName, {
                            //label: curNodeName
                            label: ''
                        });
                    });
                    curPreNodes = [curNodeName];
                    preNodes = curPreNodes;
                }

                for (var i = 0, len = branchArr.length; i < len; i++) { //进入分支
                    if (len !== 1) {
                        preNodes = curPreNodes;
                        curNodeName = 'node' + topIndex + depth.length + i + 's' + Math.random();
                        g.setNode(curNodeName, {
                            label: '进入' + '分支'
                        });

                        g.node(curNodeName).style = "fill:#aa73d1";
                        preNodes.forEach(function(nodeName) {
                            g.setEdge(nodeName, curNodeName, {
                                //label: curNodeName
                                label: ''
                            });
                        });
                        preNodes = [curNodeName];
                    }


                    for (var j = 0, c = branchArr[i].length; j < c; j++) {
                        // 顶级Index
                        if (depth.length === 1) {
                            topIndex = '' + i + j;
                        }
                        if (branchArr[i][j].branch.length === 0) { //内容元素
                            curNodeName = 'node' + topIndex + depth.length + i + j + Math.random();
                            g.setNode(curNodeName, {
                                label: des(branchArr[i][j].atom, j) + ' 匹配' + des(branchArr[i][j].operator, j, true)
                            });
                            preNodes.forEach(function(nodeName) {
                                g.setEdge(nodeName, curNodeName, {
                                    //label: curNodeName
                                    label: ''
                                });
                            });
                            preNodes = [curNodeName];
                        } else { //递归
                            preNodes = drawBranch(branchArr[i][j].branch, preNodes, branchArr[i][j].type, branchArr[i][j].operator);
                        }
                    }

                    if (len !== 1) {
                        curNodeName = 'node' + topIndex + depth.length + i + 'e' + Math.random();
                        g.setNode(curNodeName, {
                            label: ('分支' + '结束') + (operator ? ' 匹配' + des(operator, undefined, true) : '')
                        });

                        g.node(curNodeName).style = "fill:#aa73d1";
                        preNodes.forEach(function(nodeName) {
                            g.setEdge(nodeName, curNodeName, {
                                //label: curNodeName
                                label: ''
                            });
                        });
                        preNodes = [curNodeName];
                    }

                    bPreNodes.push(preNodes);
                }

                if (type) {
                    curNodeName = 'node' + topIndex + depth.length + 't' + 'e' + Math.random();
                    g.setNode(curNodeName, {
                        label: (type + '结束') + (operator ? ' 匹配' + des(operator, undefined, true) : '')
                    });
                    if (type === '捕获分组') {
                        g.node(curNodeName).style = "fill:#3B639F";
                    } else if (type === '非捕获分组') {
                        g.node(curNodeName).style = "fill:#f5f8fc";
                    } else if (type === '肯定环视') {
                        g.node(curNodeName).style = "fill:#10c2ce";
                    } else if (type === '否定环视') {
                        g.node(curNodeName).style = "fill:#BBFFFF";
                    }
                    bPreNodes.forEach(function(nodeName) {
                        g.setEdge(nodeName, curNodeName, {
                            //label: curNodeName
                            label: ''
                        });
                    });
                    preNodes = [curNodeName];
                    bPreNodes = preNodes;
                }
                depth.pop();
                return bPreNodes;
            }
            g.setNode('start', {
                label: 'start',
                title:'ssss'
            });
            preNodes.push('start');
            g.node('start').style = "fill: #999";
            //preNodes = drawBranch(arr, preNodes);
            preNodes = drawBranch(arr, preNodes);
            g.setNode('end', {
                label: 'end'
            });
            g.node('end').style = "fill: #999";
            preNodes.forEach(function(nodeName) {
                g.setEdge(nodeName, 'end', {
                    //label: 'end'
                    label: ''
                });
            });
            // Set some general styles
            g.nodes().forEach(function(v) {
                var node = g.node(v);
                node.rx = node.ry = 5;
            });

            var svg = d3.select("svg"),
                inner = svg.select("g");

            // Create the renderer
            var render = new dagreD3.render();
            // Run the renderer. This is what draws the final graph.
            render(inner, g);
            // Center the graph
            //var initialScale = 0.75;
            var zoom = d3.behavior.zoom().on("zoom", function() {
                inner.attr("transform", "scale(" + d3.event.scale + ")");
            });
            svg.call(zoom);
            var initialScale = Math.max(0.6, $(window).width() / g.graph().width);
            zoom
                .scale(initialScale)
                .event(svg);
            //svg.attr('height', g.graph().height * initialScale + 40);
            svg.attr('width', g.graph().width * initialScale);
            d3.selectAll('g').data([1,2,3,4,5,6,7]).enter().append('text').text(function(d){return d;});
        }
    };
    return obj;
});

meta.js

define('meta', function() {
    var operatorsReg = /^(?:\+\?|\*\?|\?\?|\+|\*|\?|\{\d+,\d*\}\??|\{\d+,?\}\??)/;

    function findOperator(str) {
        var oResult = operatorsReg.exec(str);
        if (oResult === null) {
            return {
                operator: '',
                length: 0
            }
        } else {
            return {
                operator: oResult[0],
                length: oResult[0].length
            }
        }
    }

    function readGroup(str) {
        var r = /[(|)]|\(\?\:/g,
            res,
            leftGroup = [],
            rightGroup = [],
            orGroup = [];
        var tempStr = str.replace(/\\./g, '&&');
        while (res = r.exec(str)) {
            if (res[0] === '(' || res[0] === '(?:') {
                leftGroup.push(r.lastIndex - 1);
            } else if (res[0] === '|') {
                orGroup.push(r.lastIndex - 1);
            } else if (res[0] === ')') {
                rightGroup.push(r.lastIndex - 1);
            }
        }

        var paraArr = [],
            tempParaCL = 0,
            tempParaCR = 0,
            paraL = 0,
            paraR = 0;
        for (var k = 0, b = 0, c = tempStr.length; k < c; k++) {
            tempParaCL = 0,
            tempParaCR = 0,
            paraL = 0,
            paraR = 0;
            if (tempStr.charAt(k) === '(') {
                paraL = k;
                for (b = k + 1; b < c; b++) {
                    if (tempStr.charAt(b) === ')') {
                        tempParaCR++;
                        if (tempParaCR > tempParaCL) {
                            paraR = b;
                            paraArr.push({
                                l: paraL,
                                r: paraR
                            });
                            break;
                        }
                    } else if (tempStr.charAt(b) === '(') {
                        tempParaCL++;
                    }
                }

            }
        }

        var resArr = [];
        if (leftGroup.length === 0) {
            if (orGroup.length) {
                for (var j = 0, l = orGroup.length; j < l; j++) {
                    if (j === 0) {
                        resArr.push({
                            l: 0,
                            r: orGroup[j] - 1,
                            or: orGroup[j]
                        });
                    } else {
                        resArr.push({
                            l: orGroup[j - 1] + 1,
                            r: orGroup[j] - 1,
                            or: orGroup[j]
                        });
                    }
                }
            } else {
                resArr = [];
            }
        } else {
            if (orGroup.length) {
                var tempCountL = 0,
                    tempCountR = 0,
                    realL = 0,
                    realR = 0;
                for (var j = 0, l = orGroup.length; j < l; j++) {
                    tempCountL = 0,
                    tempCountR = 0,
                    realL = 0,
                    realR = 0;
                    for (var n = orGroup[j]; n > 0; n--) {
                        if (tempStr[n] === ')') {
                            tempCountR++;
                        } else if (tempStr[n] === '(') {
                            tempCountL++;
                            if (tempCountL > tempCountR) {
                                realL = n;
                                break;
                            }
                        }
                    }
                    tempCountL = 0,
                    tempCountR = 0;
                    for (n = orGroup[j]; n < tempStr.length; n++) {
                        if (tempStr[n] === '(') {
                            tempCountL++;
                        } else if (tempStr[n] === ')') {
                            tempCountR++;
                            if (tempCountR > tempCountL) {
                                realR = n;
                                break;
                            }
                        }
                    }
                    resArr.push({
                        l: realL,
                        r: realR,
                        or: orGroup[j]
                    });
                }
            } else {
                resArr = [];
            }
        }
        return {
            leftGroup: leftGroup,
            rightGroup: rightGroup,
            orGroup: orGroup,
            resArr: resArr,
            paraArr: paraArr
        }
    }

    function getRightPara(leftPara, paraArr) {
        for (var i = 0, len = paraArr.length; i < len; i++) {
            if (paraArr[i].l === leftPara) {
                return paraArr[i].r;
            }
        }
    }

    var groupIndex = 1;

    function parseMeta(str, arr, isInit) {
        if (isInit) {
            groupIndex = 1;
        }
        var groupObj = readGroup(str);
        var atIndex = 0,
            atChar = '',
            tempAtom = '',
            isUnicode = false,
            isHex = false,
            paraRight = 0,
            finaIndex = 0;
        for (var len = str.length; atIndex < len; atIndex++) {
            isUnicode = false;
            isHex = false;
            atChar = str.charAt(atIndex);
            //finaIndex=arr.length;
            if (arr[finaIndex] === undefined) {
                arr[finaIndex] = [];
            }
            arr[finaIndex][arr[finaIndex].length] = {};
            if (atChar === '\\') {
                subStr = str.substring(atIndex + 1);
                if (/^u[0-9a-fA-F]{4}/.test(subStr)) { // unicode转义
                    tempAtom = '\\\\' + /^u[0-9a-fA-F]{4}/.exec(subStr)[0];
                    isUnicode = true;
                    atIndex += 5;
                } else {
                    isUnicode = false;
                }
                if (/^x[0-9a-fA-F]{2}/.test(subStr)) { // 16进制转义
                    tempAtom = '\\\\' + /^x[0-9a-fA-F]{2}/.exec(subStr);
                    atIndex += 3;
                    isHex = true;
                } else {
                    isHex = false;
                }
                if (!isUnicode && !isHex) {
                    tempFun = makeMeta(atChar);
                    atIndex++;
                    tempAtom = tempFun(str.charAt(atIndex));
                }

                arr[finaIndex][arr[finaIndex].length - 1].index = atIndex;

                arr[finaIndex][arr[finaIndex].length - 1].atom = tempAtom;

                operatorObj = findOperator(str.substring(atIndex + 1));
                arr[finaIndex][arr[finaIndex].length - 1].operator = operatorObj.operator;
                atIndex += operatorObj.length;

                arr[finaIndex][arr[finaIndex].length - 1].branch = [];

                arr[finaIndex][arr[finaIndex].length - 1].length = 0;
            } else if (atChar === '[') {
                arr[finaIndex][arr[finaIndex].length - 1].index = atIndex;

                subStr = str.substring(atIndex);
                tempFun = makeMeta('');
                tempAtom = tempFun((/\[.*?(?=([^\\])(\]))/.exec(subStr)[0]) + (/\[.*?(?=([^\\])(\]))/.exec(subStr)[1]) + (/\[.*?(?=([^\\])(\]))/.exec(subStr)[2]));
                atIndex += tempAtom.length;
                arr[finaIndex][arr[finaIndex].length - 1].atom = tempAtom;

                operatorObj = findOperator(str.substring(atIndex));
                arr[finaIndex][arr[finaIndex].length - 1].operator = operatorObj.operator;
                atIndex += operatorObj.length - 1;

                arr[finaIndex][arr[finaIndex].length - 1].branch = [];

                arr[finaIndex][arr[finaIndex].length - 1].length = 0;
            } else if (atChar === '|') {
                arr[finaIndex].pop();
                finaIndex++;
                if (atIndex === 0) {
                    arr[finaIndex - 1] = [];
                    arr[finaIndex - 1][0] = {};
                    arr[finaIndex - 1][0].index = atIndex;

                    tempAtom = '';
                    arr[finaIndex - 1][0].atom = tempAtom;

                    arr[finaIndex - 1][0].operator = '';

                    arr[finaIndex - 1][0].branch = [];

                    arr[finaIndex - 1][0].length = 0;
                }
                if (atIndex === str.length - 1 || str[atIndex + 1] === '|') {

                    arr[finaIndex] = [];
                    arr[finaIndex][0] = {};
                    arr[finaIndex][0].index = atIndex;

                    tempAtom = '';
                    arr[finaIndex][0].atom = tempAtom;

                    arr[finaIndex][0].operator = '';

                    arr[finaIndex][0].branch = [];

                    arr[finaIndex][0].length = 0;
                }
            } else if (atChar === '(') {
                paraRight = getRightPara(atIndex, groupObj.paraArr);

                arr[finaIndex][arr[finaIndex].length - 1].index = atIndex;

                subStr = str.substring(atIndex + 1, paraRight);
                if (/^\?:/.test(subStr)) {
                    atIndex += 2;
                    subStr = /^\?:(.*)$/.exec(subStr)[1];
                    arr[finaIndex][arr[finaIndex].length - 1].type = '非捕获分组';
                } else if (/^\?=/.test(subStr)) {
                    atIndex += 2;
                    subStr = /^\?=(.*)$/.exec(subStr)[1];
                    arr[finaIndex][arr[finaIndex].length - 1].type = '肯定环视';
                } else if (/^\?!/.test(subStr)) {
                    atIndex += 2;
                    subStr = /^\?!(.*)$/.exec(subStr)[1];
                    arr[finaIndex][arr[finaIndex].length - 1].type = '否定环视';
                } else {
                    arr[finaIndex][arr[finaIndex].length - 1].type = '捕获分组' + groupIndex++;
                }
                atIndex += subStr.length + 1;
                arr[finaIndex][arr[finaIndex].length - 1].atom = subStr;

                operatorObj = findOperator(str.substring(atIndex + 1));
                arr[finaIndex][arr[finaIndex].length - 1].operator = operatorObj.operator;
                atIndex += operatorObj.length;

                arr[finaIndex][arr[finaIndex].length - 1].branch = [];
                parseMeta(subStr, arr[finaIndex][arr[finaIndex].length - 1].branch);
                arr[finaIndex][arr[finaIndex].length - 1].length = 0;
            } else {
                arr[finaIndex][arr[finaIndex].length - 1].index = atIndex;

                tempAtom = str.charAt(atIndex);
                arr[finaIndex][arr[finaIndex].length - 1].atom = tempAtom;

                operatorObj = findOperator(str.substring(atIndex + 1));
                arr[finaIndex][arr[finaIndex].length - 1].operator = operatorObj.operator;
                atIndex += operatorObj.length;

                arr[finaIndex][arr[finaIndex].length - 1].branch = [];

                arr[finaIndex][arr[finaIndex].length - 1].length = 0;
            }
        }
    }

    function makeMeta(firstChar) {
        var meta = firstChar;
        return function(atChar) {
            meta += atChar;
            return meta;
        }
    }
    return parseMeta;
});

运行结果如图:

这里写图片描述

这里写图片描述

这里写图片描述

风神.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
正则表达式可视化调试工具
03-15
在编程中，理解和熟练使用正则表达式是提升效率的关键，但复杂的正则模式往往难以理解，这时，正则表达式可视化调试工具就显得尤为重要。 正则表达式可视化调试工具可以帮助开发者直观地看到正则表达式的匹配过程，...
超好用的正则表达式可视化调试工具
03-12
因此，拥有一款好的正则表达式可视化调试工具至关重要。 "超好用的正则表达式可视化调试工具"正如其名，这款工具提供了一个直观的方式来帮助用户测试、调试和理解正则表达式。可视化界面让复杂的正则模式变得清晰...
前端追梦人正则表达式教程
ilovethesunshine的博客
11-09 699
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。 搜索模式可用于文本搜索和文本替换。 1. 什么是正则表达式？ 正则表达式是由一个字符序列形成的搜索模式。 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。 正则表达式可以是一个简单的字符，或一个更复杂的模式。 正则表达式可用于所有文本搜索和文本替换的操作。 2. 语法 /正则表达式主体/修饰符(可选) 其中修饰符是可选的。
正则可视化在线工具-更直观地理解和调试正则表达式的利器
11-06 1018
​ 工具在线地址：https://amd794.com/regularGraph 正则可视化工具是一种用于帮助用户理解和调试正则表达式的工具。正则表达式是一种强大的模式匹配工具，用于在文本中搜索、替换和提取特定模式的字符串。 ​
可视化正则表达式教程
最新发布
2401_84435739的博客
05-02 558
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》要使用re模块，我们需要导入它：import re整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。
艹，正则表达式！
嵌入式Linux
03-29 464
大家好，我是球哥，转发良许同学的一篇文章。不知道大家有没有被正则表达式支配过的恐惧？看着一行火星文一样的表达式，虽然每一个字符都认识，但放在一起直接就让人蒙圈了~你是不是也有这样的操作，比如你需要使用「电子邮箱正则表达式」，首先想到的就是直接百度上搜索一个，然后采用 CV 大法神奇地接入到你的代码中？别害羞，很正常啦~（我不会告诉你我也是这么干的）今天给大家推荐两个正则表...
正则可视化工具
qinjava的博客
08-30 476
https://blog.robertelder.org/regular-expression-visualizer/z
JavaScript 字符串匹配 模糊匹配
LFQP_的博客
08-30 2418
JavaScript 字符串匹配，文章高亮词语，模糊匹配
正则表达式工具
01-12
正则表达式(Regex)是一种强大的文本处理工具，用于匹配、查找、替换或者提取符合特定模式的字符串。在编程和数据分析领域，正则表达式扮演着至关重要的角色，因为它们能够帮助开发者高效地处理和分析大量文本数据。...
Regexper一个正则表达式的可视化开源工具
08-11
总结来说，Regexper是一个基于JavaScript的正则表达式可视化工具，它提供了一个直观的学习和测试环境，使用户能够更好地理解和使用正则表达式。通过图形化展示，Regexper简化了正则表达式的复杂性，无论是对于初学者...
matlab开发-交互式正则表达式工具
11-14
在MATLAB中，正则表达式（Regular Expression）是一种强大的文本处理工具，它允许程序员进行复杂的文本匹配、查找、替换和提取操作。本项目“matlab开发-交互式正则表达式工具”专注于提供一个用户友好的环境，帮助...
强大的正则表达式生成工具
10-16
强大的正则表达式生成工具，可以生成各种复杂的正则表达式，绝对超值！
正则可视化工具：学习和编写正则表达式的利器
02-11 1745
正则可视化工具作为一种辅助工具，为学习和编写正则表达式提供了便利和支持。它具有可视化表达、即时反馈、交互式学习、错误分析、可视化调试和可重用性等优点，可以帮助用户更好地理解和编写正则表达式，提高工作效率。在学习和教学、正则表达式编写、测试和调试、数据提取和匹配等领域，正则可视化工具都有广泛的应用。通过本文的介绍，希望读者能够更好地了解正则可视化工具的优势和应用场景，并在实际工作中选择合适的工具，提升正则表达式的编写和处理能力。
JavaScript正则表达式解析器和可视化：Regulex
wangshengfei
06-23 998
今天小明问了我一个正则表达式的问题，看不懂，突然想起以前看到过一个网站 http://jex.im/regulex/ 真是一个神奇的网站， 在此附上github地址 https://github.com/JexCheng/regulex ----------我是萌萌哒参考线---------- JavaScript正则表达式解析器和可视化。 Visualizer
Regexper：牛逼的 JavaScript 正则可视化工具
weixin_33782386的博客
01-05 92
　　正则表达式通常被用来检索或替换符合某个模式的文本内容，编写正则是开发人员的必备技能。简单的正则表达式一下就能看懂含义，但是复杂的正则理解起来就很困难了。 　　Jeff Avallone 开发了一款 JavaScript 正则表达式可视化工具——Regexper，是 GitHub 上的开源项目，它能够让正则表达式字符串以 Railroad 形式图形化，便于阅读和理解。同时推荐一款 JavaSc...
三款『正则表达式』可视化工具
热门推荐
Gronbu1的博客
08-01 1万+
Regexper 是一个正则表达式的可视化开源工具，直接输入正则表达式就能用可视化显示出来。 正则表达式很牛逼了，我学习了很多次，想用的时候还得再学习，再搜索，然后不断试错…总之很折腾了。 但用处很大，各种计算机语言都能用到。所以这个 Regexper 就是给你试错用的。 只需要把你的表达式输入进去，就有可视化的图形，并且能够导出 svg 格式图片以及获取固定链接,比如这样 这样无论...
正则表达式及其可视化
justsolow的博客
05-12 492
正则表达式 推荐两个正则表达式的介绍网站和可视化网站。（记录备忘），另外多说一句，正则表达式这东西还得自己拍脑袋实际去用。 介绍 可视化
在线正则表达式可视化工具
Linux,Java,SpringBoot,Python,Lua略知一点
07-25 392
在线正则表达式可视化工具 在线正则表达式可视化工具 本工具提供在线正则表达式的测试，支持替换，客户端实时计算，数据实时更新。 https://tooltt.com/regulex/
在线正则表达式可视化测试工具
Linux,Java,SpringBoot,Python,Lua略知一点
01-14 1046
在线正则表达式可视化测试工具 在线正则表达式可视化测试工具 在线正则表达式可视化测试工具。在线正则表达式可视化测试工具。 https://tooltt.com/regulex/

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值