javascript - 如何在 HTML 中的某个字符后换行?

标签 javascript html css

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

<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>


仅供引用:因为它会重新创建所有元素,所以它会破坏附加到子元素的任何处理程序。


更新:如果需要更新多个 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>

关于javascript - 如何在 HTML 中的某个字符后换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39169493/

相关文章:

javascript - Google 日历错误地从 .ics 文件导入事件

javascript - 使用 Javascript 更改标题

java - 使用 jsoup 解析脚本(JSON 数据)

PHP - 避免在表单提交后重新加载页面

jquery - 无法在 jQuery 中反转宽度动画 Action

javascript - 将点击事件从 Canvas 传播到 div

javascript - 如何使链接在新的小窗口中打开?

css - 交叉关闭 div 未正确对齐

javascript - 仅使用javascript动态添加div

javascript - 搜索/过滤后的 Yii2 点击事件