Question

例如我有一些HTML元素，如下面的

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

我想使用javascript使其像

一样

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

我怎么能实现这个目标？

更新1：

我正在使用其他方法来执行我的任务，因为有些reaseon，它看起来像下面

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>

＆＃13;

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

＆＃13;

p {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

或使用Array#map而不使用jQuery

＆＃13;

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

＆＃13;

p {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 2

你可以做这样的事情

$('#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>

或在此使用 replace()

$('#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>

用逗号分割字符串并在格式化后显示它

2 个答案: