Javascript replace() function not working in jQuery UI Dialog

Question

I've been using javascript replace() with to limit input to digits and a single decimal like this:

<input id="dialog-input" type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" \>

This works perfectly fine and if I can get dialog content from the existing input like this:

<input id="dialog-input" type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" \>
dialog = $( '#dialog-input' ).dialog({ });

However, if rendered the input directly as a jQuery object for the dialog like this, the second regex replace seems to fail getting the capturing group and something happens where it will only allow a single character in the input:

dialog = $( '<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, \'\').replace(/(\..*)\./g, \'$1\');" \>' ).dialog({ });

Why does this work in one case but fail in the other? I have a hunch that some part of my regex needs to be escaped but I've tried a multitude of variations and nothing seems to work.

Answer 1

Double escape your period in the second regex:

'...replace(/(\\..*)\\./g, \'$1\');" \>'

I would just avoid working with strings:

$('<input type="text">').on('input', function() {
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
}).appendTo('body').dialog();