CODEWITHSUNDEEP
javascriptjqueryhtml
user1282637
user1282637

Reputation: 1867

Parsing HTML plaintext data into javascript array

So I have a very simple HTML page called Terms.html. Here is the output:

Museums, Parks, Railroads and Trains, Shopping, Theatres

and here is the code:

<!DOCTYPE html>
<html>
<body> Museums, Parks, Railroads and Trains, Shopping, Theatres </body>
</html>

Now, I am using jQuery $.get method to retrieve this html page:

<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<script>
var tags = [ "String1", "String2"];
$.get("Terms.html", function(data, status) {
    <!--  -->

    $(result).html( data );
    alert("Status: " + status);
});

</script>

<p>Search terms are: <span id="displayterms"></span></p>
<div id="result"><div>

</body>
</html>

What I want to do is be able to parse Museums, Parks, Railroads and Trains, Shopping, Theatres into individual strings and add them to my var tags array. Any ideas on how I can do this? Thanks

Upvotes: 1

Views: 1830

Answers (4)

xDaevax
xDaevax

Reputation: 2022

Instead of storing the contents as HTML, you could store them in a JSON data file.

An example JSON data file (places.json):

{
    "Names": [ "Museums", "Parks", "Railroads and Trains", "Shopping", "Theatres"]
}

Then, you can change your page code to:

<script>
var tags = [ "String1", "String2"];
$.getJSON("/places.json", function(data) {
    $(result).html(data);
    console.log(data.Names[0]); // Outputs Museums
    $.each(data.Names, function(index, value) {
        tags.push(value); // add the tag to your tags list for each item in Names
    });
});

</script>

This way you can store just the data you need and you won't need to parse the HTML manually.

Upvotes: 0

j08691
j08691

Reputation: 207901

Try:

var tags = ["String1", "String2"];
var str = "Museums, Parks, Railroads and Trains, Shopping, Theatres";
arr = $.map( tags.concat(str.split(',')), function( n ) { return $.trim(n) });
console.log(arr); // Outputs the array ["String1", "String2", "Museums", "Parks", "Railroads and Trains", "Shopping", "Theatres"]

jsFiddle example

The third line splits the str on the commas and then uses jQuery's .map() function to trim the whitespace.

Upvotes: 1

The Spooniest
The Spooniest

Reputation: 2873

If you don't need to support versions of IE older than 9, you could do something like this:

var tags = document.body.textContent.split(',').map(
    function (s) {
        return s.trim();
    }
);

document.body.textContent gets the text in the body tag. This restricts your browser support, as IE didn't have this until version 9.

.split(',') takes the string and splits it into its component parts, returning an array.

.map() applies a function to everything in the array returned by .split(','), and returns an array of the results. In this case, we use it to call trim() on each string in the array, to strip leading and trailing whitespace. IE didn't have the Array.prototype.map or String.prototype.trim methods until version 9, but they're easy to polyfill. It's the textContent thing above that's trickier.

The array returned from map() is then put into your tags variable.

Upvotes: 0

David Lounsbrough
David Lounsbrough

Reputation: 430

With the split function: http://www.w3schools.com/jsref/jsref_split.asp

This will split on any character you choose, in this case ","

tags = data.split(",");

Upvotes: 0

Related Questions