CODEWITHSUNDEEP
javascriptregexreplace
John McMullen
John McMullen

Reputation: 77

replace coordinates in string with derived string javascript

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 :)

Upvotes: 0

Views: 249

Answers (3)

Aaren Cordova
Aaren Cordova

Reputation: 2078

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>

Upvotes: 0

aka
aka

Reputation: 103

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>";
  }
)

Upvotes: 0

Barmar
Barmar

Reputation: 780798

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.

Upvotes: 1

Related Questions