javascript 用新标签替换当前标签

hlswsv35  于 2023-02-15  发布在  Java
关注(0)|答案(2)|浏览(213)

所以,我有一些文本,看起来像:

<div class="content__main">
    <p>This is some text<br>
    This is another line<br>
    Third line goes here<br>
    How about one more</p>
</div>

我想做的是用JavaScript或者jQuery找到<br>标签,替换成</p><p>标签,内容是自动生成的,不能自己添加。
我希望它看起来像:

<div class="content__main">
    <p>This is some text</p>
    <p>This is another line</p>
    <p>Third line goes here</p>
    <p>How about one more</p>
</div>

我试过:

<script type="text/javascript">
    $(function(){
        $('.content__main').replace(/<br>\\*/g,"</p><p>"));
    });
</script>

但这似乎没有任何作用,我想我已经很接近了,有人能给我解释一下吗?
谢谢你,
乔希

jjhzyzn0

jjhzyzn01#

编辑:将querySelector更改为querySelectorAll,并使用for of以支持多个class="content__main"元素

简单,不安全的方式

您可以在innerHTML上执行replace并将其设置为元素。

const d = Array.from(document.querySelectorAll('.content__main'));

for (let e of d) {
    e.innerHTML = e.innerHTML.replace(/<br>\\*/g,"</p><p>");
}
<div class="content__main">
    <p>This is some text<br>
    This is another line<br>
    Third line goes here<br>
    How about one more</p>
</div>
更安全的方法来防止未关闭的标签

为了防止丢失结束标记,更安全的方法是:
1.获取innerHTML
1.换行时拆分
1.对于每一行;

  1. Remove all the tags
  2. trim()空格
  3. Create a p并添加文本
  4. Insert到原始的div
    一个二个一个一个
ojsjcaue

ojsjcaue2#

因此,您的问题是,您正在jQuery对象$('.content__main')上使用.replace,这是JavaScript默认字符串函数-您需要将其HTML值作为字符串来执行.replace
您肯定不需要jQuery来完成此操作,但如果您使用它,代码可能如下所示:

$(function(){
        let current_content = $('.content__main').html();
        current_content = current_content.replace(/<br>\\*/g,"</p><p>")
        $('.content__main').html(current_content);
    });

相关问题