Question 11193 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

JS replace current tag with a new tag – Jquery

So, I have some text that looks like:

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

What I’d like to do is use JavaScript or jQuery to find the <br> tags and replace them with </p><p> tags. The content is auto-generated, so I can’t just add it myself.

I’d like it to look like:

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

I tried:

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

But this doesn’t seem to do anything, I think I’m pretty close though, can anyone shed some light on this for me?

Thanks,
Josh

Tags:

2

Answers


  1. 0

    Edit: Changed querySelector to querySelectorAll with a for of to support multiple class="content__main" elements

    Simple, unsafe way

    You could just do the replace on the innerHTML and set that to the element.

    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>
    Safer way to prevent un-closed tags

    A more safe way of doing this, to prevent missing a closing tag is to:

    1. Get the innerHTML
    2. Split on newlines
    3. For each line;
      1. Remove all the tags
      2. trim() the spaces
      3. Create a p and add the text
      4. Insert that to the original div
    const d = Array.from(document.querySelectorAll('.content__main'));

for (let e of d) {

  let old = e.innerHTML;
  e.innerHTML = '';

  for (let line of old.split("n")) {
    let cleaned = line.replace(/</?[^>]+(>|$)/g, "").trim();
    if (cleaned !== '') {
        let newE = document.createElement('p')
        newE.innerHTML = cleaned;
        e.appendChild(newE);
    }
  }
}
    <div class="content__main">
    <p>This is some text<br>
    This is another line
    Third line goes here<br>
    How about one more</p>
</div>
    Login or Signup to reply.
  2. 0

    So your problem is that you’re using .replace which is a JavaScript default string function on a jQuery object $('.content__main') – you need to get the HTML value of this as a string to do .replace.

    You definitely don’t need jQuery for this, but if you were using it the code could look as follows:

        $(function(){
        let current_content = $('.content__main').html();
        current_content = current_content.replace(/<br>\*/g,"</p><p>")
        $('.content__main').html(current_content);
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search