split string by comma and display it after format it

Question

for example i have some HTML elements like below

<p> apple,banana,oranger</p>

and i'd like to use the javascript to make it like

<p>apple</p> <p>banana</p> <p>orange</p>

How may i achieve this?

UPDATE 1:

I am using other methods to do my task due to some reaseon and it looks as like below

var node = document.getElementById('discovereedKeywords');
node.innerHTML = node.innerHTML.replace(/,/g, '<p class="tag-item">');

and in reality those <p> tags are actually generate by a for loop, but my method only change the first node it found therefore i tried

Consider the html looks like this

 <p class="discovereedKeywords"> apple,banana,oranger</p>

 <p class="discovereedKeywords"> apple,oranger,oranger</p>

 <p class="discovereedKeywords"> kiwi,melon,pinapple</p>

Javascript

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

    var node[i] = document.getElementByClassName('discovereedKeywords');
    node[i].innerHTML = node.innerHTML.replace(/,/g, '<p class="tag-item">');

                }

            }

but this those work, why?

Use `","` instead of the `" "` in the duplicate and wrap in `
` instead of a span. You likely want to [.replaceWith()](http://api.jquery.com/replacewith/) the `
` you had in the beginning — mplungjan, May 06 '16 at 07:57
It can be done without using jquery though. `
apple,banana,orange
` — Alexus, May 06 '16 at 08:09
but i'd still like to know how could i make it works on every element has the class discovereedKeywords — Anson Aştepta, May 06 '16 at 10:03

Rayon · Answer 1 · 2016-05-06T08:18:12.737

Use .split to split the string in array. .join the array in string by concatenating </p></p> in between items. Wrap the string in <p>

$('p').get(0).outerHTML = ('<p>' + $('p').text().split(',').join('</p><p>') + '</p>');

p {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p>apple,banana,oranger</p>

OR using Array#map without jQuery

var elem = document.getElementById('demo');
elem.outerHTML = elem.textContent.split(',').map(function(el) {
  return '<p>' + el + '</p>';
}).join('');

p {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p id='demo'>apple,banana,oranger</p>

Pranav C Balan · Answer 2 · 2016-05-06T10:27:56.360

You can do something like this

$('#p').html(function(i, v) {
    return '<p class="discovereedKeywords">' + v.split(',').join('</p><p class="discovereedKeywords">') + '</p>'; // update the html content
  })
  .children() // get children p
  .unwrap(); // unwrap the parent p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p">apple,banana,oranger</p>

Or use replace() here

$('#p').html(function(i, v) {
    return v.replace(/([^,]+)(?:,|$)/g, '<p class="discovereedKeywords">$1</p>')
  })
  .children() // get children p
  .unwrap(); // unwrap the parent p

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p">apple,banana,oranger</p>

@anson920520 : updated – Pranav C Balan May 06 '16 at 10:28 — Pranav C Balan, May 06 '16 at 10:28

split string by comma and display it after format it

2 Answers2