javascript - 用逗号分割字符串并格式化后显示

Question

例如我有一些如下所示的 HTML 元素

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

我想使用 javascript 使其像

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

我怎样才能实现这个目标？

更新1:

由于某种原因，我正在使用其他方法来完成我的任务，如下所示

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

实际上那些<p>标签实际上是由 for 循环生成的，但我的方法只更改它找到的第一个节点，因此我尝试了

考虑 html 看起来像这样

 <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">');

                }

            }

但是这些都有效，为什么？

Answer 1

使用.split拆分string在数组中。 .join通过连接 </p></p> 得到字符串中的数组在项目之间。将字符串包裹在 <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>

或使用 Array#map没有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>