33

I really enjoy having the code snippet tool for browser languages. However, I think it would be nice if that was expanded to have it work for regular expressions.

There are a couple that I would think it would be nice to be modeled on:

http://regexper.com/ -- A nice visual way to see what the regex will do

http://www.regexr.com/ -- A nice way to test input and find matches.

7
  • 22
    I like regex101.com, which supports PCRE, JS and Python flavours
    – jonrsharpe
    Aug 10, 2015 at 13:26
  • 4
    Do you think that will drain the swamp at regex? Aug 10, 2015 at 15:54
  • 1
    @Deduplicator im not sure what you mean. Aug 10, 2015 at 17:11
  • 11
    @Deduplicator: The phrase is a derivation from what’s supposedly an old southern expression: “When you’re up to your ass in gnats and alligators, it’s easy to forget that the initial objective was to drain the swamp.” It means that when you’re working toward a long-term goal (draining the swamp), your time and energy can be eaten up by urgent, daily tasks (slaying alligators) that don’t necessarily aid you in achieving more important future objectives.
    – Paul Sasik
    Aug 10, 2015 at 23:01
  • 2
    I don't think it's feasible with the number of languages and implementations (not mentioning version differences).
    – nhahtdh
    Aug 11, 2015 at 5:59
  • 1
    Seealso: meta.stackoverflow.com/q/255405/563088
    – Emond
    Aug 11, 2015 at 15:10
  • See also: meta.stackoverflow.com/q/300936/1830736 (shameless plug :) Aug 11, 2015 at 15:34

2 Answers 2

29

Very often answers linking to one of the popular online tools are the bad answers ignoring the specificity of the question.

There are too many differences between

  • flavors
  • implementations (and bugs)
  • API (yes, it's often about the functions you might use to get to the goal, not just the expression)

And everything changes with the versions.

I think this would mainly help answering the trivial or already answered questions and decrease the quality of answers to questions supposing a specific expertise.

My opinion is that the effort (moderation and tools) should rather target the too often missing mentions of the specificity (language, tools) and of a minimal test set. This would also help sort the so many regex questions that are, in fact, XY problems.

1
  • 2
    Completely agreed. To add - it is also pretty expensive to add (and maintain) for multiple languages/systems together. The gain, as Denys explains is not very big since most RegExp questions I see are either not solved by this ("deep" questions), bad and too specific, or specific to an API. Aug 13, 2015 at 7:06
9

You can use this one, made with the JS snippet feature. You can use this on any answers you want without attribution. Just add the pre-filled content to the //Edit Here section and have fun!

"use strict";

var expression_elm = document.getElementById("expression");
var flags_elm = document.getElementById("flags");
var data_elm = document.getElementById("data");
var output_elm = document.getElementById("out");

//Edit here!
expression_elm.value = "";
flags_elm.value = "";
data_elm.value = "";

function set_output(content) {
  output_elm.innerHTML = content;
}

function group_element(content, g) {
  return '<span class="group-' + g + '" title="Group ' + g + '">' + content + '</span>';
}

function in_range(range, n) {
  return n >= range[0] && n < range[1];
}

function update_match(regex, flags, subject) {
  var characters = subject.split("");
  var groups = new RegExp(regex, flags).exec(subject);

  if (groups !== null) {
    var ranges = [];
    var current_index = 0;
    for (var i = 0, length = groups.length; i < length; i++) {
      var group = groups[i];
      var start = subject.indexOf(group, current_index);
      var end = start + group.length;
      if (i > 0) current_index = end;
      ranges.push([start, end]);
    }

    for (var i = 0, length = characters.length; i < length; i++) {
      var new_char = characters[i];
      for (var j = ranges.length - 1; j >= 0; --j) {
        if (in_range(ranges[j], i)) {
          new_char = group_element(new_char, j);
        }
      }
      characters[i] = new_char;
    }

    set_output(characters.join(""));
  }
}

function on_change() {
  setTimeout(function() {
    update_match(expression_elm.value, flags_elm.value, data_elm.value);
  }, 50);
}

expression_elm.onkeypress = on_change;
data_elm.onkeypress = on_change;
* {
  font-family: sans-serif;
}
.group-0 {
  border-bottom: 1px solid black;
}
.group-1,
.group-4,
.group-7 {
  background: rgba(255, 0, 0, 0.3333);
}
.group-2,
.group-5,
.group-8 {
  background: rgba(0, 0, 255, 0.3333);
}
.group-3,
.group-6,
.group-9 {
  background: rgba(0, 255, 0, 0.3333);
}
<label for="expression">Regular Expression:</label>
<input id="expression" type="text">
<label for="flags">Flags:</label>
<input id="flags" type="text">
<br>
<label for="data">Test Data:</label>
<textarea id="data" type="text"></textarea>
<br>Result:
<br>
<div id="out"></div>

(Hover the colored blocks to see which group they are)

If anyone has any improvements to make, feel free to edit this answer.

5
  • 9
    That only works for Javascript though, not PCRE or Java. Aug 11, 2015 at 5:08
  • 1
    @remus Of course. It would be rather unfeasible add all flavors of regexes.
    – Kroltan
    Aug 11, 2015 at 13:27
  • yeah, but why go to all the effort just to do it for JavaScript? Aug 11, 2015 at 14:20
  • 2
    @remus It took me just 30 minutes to do this. It can still be used for simpler expressions on most flavours.
    – Kroltan
    Aug 11, 2015 at 14:51
  • 6
    @Kroltan the infeasibility to do it for all regex flavors is why this is not a very good idea. Aug 11, 2015 at 15:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .