Parsing HTML plaintext data into javascript array

Question

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

j08691 · Accepted Answer · 2014-09-12 16:14:11Z

1

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.

answered Sep 12, 2014 at 16:14

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Lounsbrough · Accepted Answer · 2014-09-12 15:57:46Z

0

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(",");

answered Sep 12, 2014 at 15:57

David Lounsbrough

4322 silver badges9 bronze badges

6 Comments

user1282637 Over a year ago

How can I get the string from the HTML? is data the actual plaintext or the code for the html?

somethinghere Over a year ago

@David Lounsbrough That'll do the trick. however since he already has tags in his array and wants to add you should probably do var tags2 = data.split(,); foreach(var i =0; i < tags2.length; i++){ tags.push(tags2[i]; )} - @user1282637 it will get the dom element (in this case, the contents of the body) and return it as a string api.jquery.com/get

Brian Bolli Over a year ago

Don't forget to account the spaces after each comma and removal of the word and.

David Lounsbrough Over a year ago

oh, I see you defined data as the html output. In this case you could say tagString = $(data).find("body").html();

a-d Over a year ago

@DavidLounsbrough It may be a better choice to reference split function on mdn instead of w3schools as it lacks of details and is sometimes even wrong (for example split may accept a RegExp as a parameter, which is not mentionned in w3school reference).

|

The Spooniest · Accepted Answer · 2014-09-12 16:13:10Z

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.

xDaevax · Accepted Answer · 2014-09-12 17:28:50Z

0

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.

edited Sep 12, 2014 at 17:28

answered Sep 12, 2014 at 16:31

xDaevax

2,0222 gold badges25 silver badges37 bronze badges

Collectives™ on Stack Overflow

Parsing HTML plaintext data into javascript array

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related