如何在HTML中某些字符之后换行

How to break line after certain character in HTML?

本文关键字：字符 之后 换行 HTML      更新时间：2023-09-26

如果我有一个包含如下内容的字段:

<div class="break-field">    
Something something, else else
</div>

当Javascript检测到' '字段中的逗号时就会启动并在后面加上<' br>，得到如下内容:

<div class="break-field">
Something something,</ br>
else else
</div>

使用 String#replace

方法

var ele = document.querySelector('.break-field');
ele.innerHTML = ele.innerHTML.replace(/,/g, ',<br/>')
<div class="break-field">
  Something something, else else
</div>

供参考:由于它重新创建所有元素，它将销毁附加到子元素的任何处理程序。

UPDATE:如果多个div需要更新，那么您需要获取所有div并遍历它们。

// get all divs
var eles = document.querySelectorAll('.break-field');
// convert to array(or use Array.from) and iterate over them
[].slice.call(eles).forEach(function(ele) {
  ele.innerHTML = ele.innerHTML.replace(/,/g, ',<br/>')
});
<div class="break-field">
  Something something, else else
</div>
<div class="break-field">
  Something something, else else
</div>
<div class="break-field">
  Something something, else else
</div>

相关文章：