CODEWITHSUNDEEP
javascriptjqueryhtmlcss
const_ref
const_ref

Reputation: 4096

Splitting large chunk of text into individual words

Using JS/JQuery I parse some data from my server and then do the following to display it onto my webpage

document.getElementById("info").innerHTML = info_data;

The result of this is naturally one chunk of data that is displayed on the page. I would like to be able to further parse this data so that each word can be individually formatted/hyperlinked and then display in a list for example.

Because the size of data can be dynamic I am not sure of a way in which this could be done and would be grateful for any assistance.

The HTML and CSS for this are extremely simple as of now and are as follows:

<div class="info_list" id="info"></div>

.info_list
{
    padding-bottom: 50px;
    color: #069;
    font-size: 20px;
}

Example currently:

Blah Blah2 Blah3 Blah4 Blah5 etc....

Ideal Solution: 

<hyperlink>Blah
<hyperlink>Blah2
etc........

Upvotes: 1

Views: 247

Answers (2)

Igl3
Igl3

Reputation: 5108

Use var words = info_data.split(" "); to split your string at every space which will return you an array with all the words of your string ;)

Then you get word 1 by words[0] word 2 by words[1] and so on.

Then you can add the links by jQuery append:

for(var i = 0; i< words.length; i++){
        var newLink = "<a href='"+words[i]+"'>"+words[i]+"</a>";
        $("#info").append(newLink);
    }

Here is a working fiddle

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

document.getElementById("info").innerHTML = info_data.replace(/([^\s]+)/g, '<a href="$1">$1</a>');

Demo: Fiddle

Upvotes: 1

Related Questions