Writing out local IP in replace() (jQuery)

Question

I want to replace a localhost adress pasted into an input field with the current local IP adress of the user. I've already got this jQuery script where the user enters the localhost adress in an input field, clicks a button and then receives the adress with "localhost" replaced with something else in the input field and in the clipboard automatically.

//Clicking button
$("button").click(function() {
    var $textArea = $("input");

    //Entered texts value
    var oldText = $textArea.val();

    //Entered texts value, with words replaced
    var newText = oldText.replace("localhost", "something else");

    //Replace old value with new value and select it
    $textArea.val(newText).select();

    //Copy new text to clipboard and view new text in textarea
    document.execCommand('copy');
    $textArea.val(newText);
});

Now I want the script to replace "localhost" with the actual local IP adress dynamically (instead of "something else", in the code above). In order to return the local IP adress, I'm using this snippet. I got some help turning the snippet into a function that I can use, that returns the local IP adress.

function getLocalIPAddress() {
    window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
    var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){};
    pc.createDataChannel(""); //create a bogus data channel
    pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
    var myIP;
    pc.onicecandidate = function(ice){ //listen for candidate events
        if(!ice || !ice.candidate || !ice.candidate.candidate) return;
        myIP = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(ice.candidate.candidate)[1];
        pc.onicecandidate = noop;
    };
    return myIP;
}

However, I'm kind of lost in how I would do to use the function in the jQuery code, so that "localhost" is replaced with what the getLocalIPAddress function returns. This is how I tried to do it, but I end up getting "localhost" replaced with undefined:

function getLocalIPAddress() {
    window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
    var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){};
    pc.createDataChannel(""); //create a bogus data channel
    pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description
    var myIP;
    pc.onicecandidate = function(ice){ //listen for candidate events
        if(!ice || !ice.candidate || !ice.candidate.candidate) return;
        myIP = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(ice.candidate.candidate)[1];
        pc.onicecandidate = noop;
    };
    return myIP;
}

//Clicking button
$("button").click(function() {
    var $textArea = $("input");

    //Entered texts value
    var oldText = $textArea.val();

    //Entered texts value, with words replaced
    var newText = oldText.replace("localhost", getLocalIPAddress());

    //Replace old value with new value and select it
    $textArea.val(newText).select();

    //Copy new text to clipboard and view new text in textarea
    document.execCommand('copy');
    $textArea.val(newText);
});

I'm obviously doing something fundamentally wrong.

What does getLocalIPAddress return when run in console? It sounds like the function isn't returning any data, thus undefined is being used. — Matt Cowley, Nov 24 '16 at 10:52
The WebRTC code is asynchronous, you can't return the value from the function. You need to perform the replace in the callback function. — Barmar, Nov 24 '16 at 11:06

score 0 · Accepted Answer · answered Nov 26 '16 at 21:23

I got this solution from another developer forum. Apparently the easiest way to make this work is to create a function that can run when the result is done.

function getLocalIPAddress(success) {
    window.RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
    var pc = new RTCPeerConnection({iceServers:[]}), noop = function(){};
    pc.createDataChannel(""); //create a bogus data channel
    pc.createOffer(pc.setLocalDescription.bind(pc), noop); // create offer and set local description

    pc.onicecandidate = function(ice){ //listen for candidate events
        if(!ice || !ice.candidate || !ice.candidate.candidate) return;
        myIP = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/.exec(ice.candidate.candidate)[1];
        pc.onicecandidate = noop;

    success(myIP);
    };
}

//Clicking button
$("button").click(function() {

    var $textArea = $("input");

    //Entered texts value
    var oldText = $textArea.val();

    getLocalIPAddress( function (ip) {

        //Entered texts value, with words replaced
        var newText = oldText.replace("localhost", ip);

        console.log(newText);
        //Replace old value with new value and select it
        $textArea.val(newText).select();
        //Copy new text to clipboard and view new text in textarea
        document.execCommand('copy');
        $textArea.val(newText);

    } );
});

Writing out local IP in replace() (jQuery)

1 Answers1