how to use external json file as a variable

Question

In a previous question I asked how to implement a client side bad word filter.

The problem I have is that I don't want to send the masive string to the page, but rather call it from an external file.

here's the code so far

    var filter = ['ass']; // this is a literal JSON result
    String.prototype.repeat = function (num) {
        return new Array(num + 1).join(this);
    }

    $('body').html(function (i, txt) {
        for (var i = 0; i < filter.length; i++) {

            // Create a regular expression and make it global
            var pattern = new RegExp('\\b' + filter[i] + '\\b', 'g');

            txt = txt.replace(pattern, "****");
        }

        return txt;
    });

But I'd like to change it to soemthing like

    var filter = '/generic/profanity/'; // the "profanity" page generates the exact 
                                        // same JSON result as above only in a cached
                                        // external page (it's actually generated by
                                        // an ASP.NET MVC Controller (ContentResult)
    String.prototype.repeat = function (num) {
        return new Array(num + 1).join(this);
    }

    $('body').html(function (i, txt) {
        for (var i = 0; i < filter.length; i++) {

            // Create a regular expression and make it global
            var pattern = new RegExp('\\b' + filter[i] + '\\b', 'g');

            txt = txt.replace(pattern, "****");
        }

        return txt;
    });

but unfortunately with this, it's using '/generic/profanity' as a literal string for the regex rather than a reference path.

This is probably something really stupid, but how would I fix this?

Edit:

after @GSP's answer I'm trying this approach, and though it feels closer, it's still not working.

If I go into firebug and look at the "filter" variable in the DOM, it is represented as ['asdf']

    var filter = '';

    String.prototype.repeat = function (num) {
        return new Array(num + 1).join(this);
    }

    $('.page').html(function (i, txt) {

        $.getJSON('/generic/profanity', function (data) {

            // data is the contents of the 
            filter = data;

        });

        for (var i = 0; i < filter.length; i++) {

            // Create a regular expression and make it global
            var pattern = new RegExp('\\b' + filter[i] + '\\b', 'g');

            txt = txt.replace(pattern, "****");
        }

        return txt;
    });

Answer 1

Because the JQuery will always be run from the browser context you will always be downloading the file anyway so this isn't going to work the way you think it is.

But, if you want to use this method you'll want to use one of the JQuery methods like $.get, or $.getJSON to get the file from your server before you parse it:

var filter = '';
$.getJSON('/generic/profanity', function(data) {

  // data is the contents of the 
  filter = data;

});

Answer 2

Without knowing too much about the previous topic, just perform a replace on the filter and make the \\ escaped ( \\\\ ). Though not sure how you're going to use JavaScript to open a file (unless the file's hosted and you're using ajax or something to retrieve the list). JS is very sand-boxed when it comes to accessing local files.

var pattern = new RegExp('\\b' + filter[i].replace('\\','\\\\') + '\\b', 'g');

Answer 3

Here is an example: Dynamically loading an external JavaScript or CSS file

Because JSON is in general pure JavaScript the above example should work.