replace coordinates in string with derived string javascript

Question

I'm attempting to take a text/string and replace all coordinates in the string with alternate values.

For example:

This coord is [80,20] and [30,25]

should become:

This coord is <a href='location?x=80&y=20'>[80,20]</a> and <a href='location?x=30&y=25'>[30,25]</a>

basically, making coordinates in the text clickable direction links.

I already have my regex expression:

/\[\-{0,1}[0-9]{1,}\,\-{0,1}[0-9]{1,}\]/

I've tested it, and it will select what i'm looking for, but i'm not fluent with the javascript side of replacing substrings with regex, and taking the results of the regex, as part of the replacing string.

Any pointers in the right direction would be greatly appreciated :)

I'm not replacing 80 with 30, i'm replacing the whole string "This coord is [80,20] with [30,20] i'm editing to take out 'with' so its less confusing — John McMullen
– John McMullen, Commented Nov 21, 2014 at 1:23

Barmar · Accepted Answer · 2014-11-21 01:23:18Z

1

Capture the coordinates with (), and then refer to them in the replacement as $1, $2, etc. $& refers to the match of the whole regexp.

var string = 'This coord is [80,20] and [30,25]';
var newString = string.replace(/\[(-?\d+),(-?\d+)\]/g, "<a href='location?x=$1&y=$2'>$&</a>");
alert(newString);

Note that {0,1} can be simplified to ?, and {1,} is equivalent to +. There's also no need to escape = or , in the regexp, and \d matches digits.

answered Nov 21, 2014 at 1:23

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John McMullen Over a year ago

This was a simple answer! I was storing the regex in a RegExp constructor that was screwing with the replacement (not putting in the grouping, but rather printing the actual '$1') Thanks!

aka · Accepted Answer · 2014-11-21 01:36:46Z

0

Try to use this

s.replace(
  /\[(\-{0,1}[0-9]{1,})\,(\-{0,1}[0-9]{1,})\]/g, 
  function(match, x, y, offset, str) {
    return  "<a href=\"location?x=" + x +
            "&y=" + y +
            "\">" + "["+x+","+y+"]" + "</a>";
  }
)

answered Nov 21, 2014 at 1:36

aka

1031 gold badge1 silver badge7 bronze badges

Comments

Aaren Cordova · Accepted Answer · 2014-11-21 03:17:26Z

Quick Answer:

var coordPattern = /\[\s*\+?(-?)\s*0*(\d*\.?\d+)\s*,\s*\+?(-?)\s*0*(\d*\.?\d+)\s*\]/g;
var inputString = "This coord is [80,20] and [30,25]";
var outputString = inputString.replace(coordPattern, "<a href='location?x=$1$2&y=$3$4'>[$1$2,$3$4]</a>");

If you don't care about spaces

var coordPattern = /\[\+?(-?)0*(\d*\.?\d+),\+?(-?)0*(\d*\.?\d+)\]/g;

If you don't care about preceding plus or minus signs

var coordPattern = /\[\s*()\s*0*(\d*\.?\d+)\s*,\s*()\s*0*(\d*\.?\d+)\s*\]/g;

If you don't care decimals

var coordPattern = /\[\s*\+?(-?)\s*0*(\d+)\s*,\s*\+?(-?)\s*0*(\d+)\s*\]/g;

If you care about preceding zeros

var coordPattern = /\[\s*\+?(-?)\s*(\d*\.?\d+)\s*,\s*\+?(-?)\s*(\d*\.?\d+)\s*\]/g;

If you want it all!...Wealth. Women. And one more thing...

var coordPattern = /\[\s*\+?(-?)\s*0*(\d*\.?\d+)\s*,\s*\+?(-?)\s*0*(\d*\.?\d+)\s*\]/g;

Test code

var coordPattern = /\[\s*\+?(-?)\s*0*(\d*\.?\d+)\s*,\s*\+?(-?)\s*0*(\d*\.?\d+)\s*\]/g; // If you want it all!...Wealth. Women. And one more thing...
var testStrings = [
    "This coord is [80,20] and [30,25]",
    "This coord is [80 ,20] and [30, 25]",
    "This coord is [ 80,20] and [30,25 ]",
    "This coord is [-80,20] and [+30,25]",
    "This coord is [1.23,20] and [30,4.56]",
    "This coord is [-.123,20] and [+0.456,25]"
];

var expectedAnswers = [
    "This coord is <a href='location?x=80&y=20'>[80,20]</a> and <a href='location?x=30&y=25'>[30,25]</a>",
    "This coord is <a href='location?x=80&y=20'>[80,20]</a> and <a href='location?x=30&y=25'>[30,25]</a>",
    "This coord is <a href='location?x=80&y=20'>[80,20]</a> and <a href='location?x=30&y=25'>[30,25]</a>",
    "This coord is <a href='location?x=-80&y=20'>[-80,20]</a> and <a href='location?x=30&y=25'>[30,25]</a>",
    "This coord is <a href='location?x=1.23&y=20'>[1.23,20]</a> and <a href='location?x=30&y=4.56'>[30,4.56]</a>",
    "This coord is <a href='location?x=-.123&y=20'>[-.123,20]</a> and <a href='location?x=.456&y=25'>[.456,25]</a>"
];

for(var i = 0; i < testStrings.length; ++i){
    var inputString = testStrings[i];
    var expectedString = expectedAnswers[i];
    var outputString = inputString.replace(coordPattern, "<a href='location?x=$1$2&y=$3$4'>[$1$2,$3$4]</a>");

    jQuery('body').append(
      jQuery('<span>').append([
        '--test-passed=' + (outputString === expectedString),
        '--input="' +  inputString + '"',
        '--output=', outputString
        ].join('')
      ),
      jQuery('<br/>')
    );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

replace coordinates in string with derived string javascript

3 Answers 3

1 Comment

Comments

Quick Answer:

Test code

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Quick Answer:

Test code

Comments

Your Answer

Sign up or log in

Post as a guest

Related