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

Replace characters in a series of headlines – Jquery

I’m working with feed that I have no control over. I need to replace the first half pipe character in each of a number of headlines with a <div> e.g.

<h3>New Clause 12 - Monitoring tool | Order | Committees</h3>

Changes to

<h3>New Clause 12 - Monitoring tool</h3><div> Order | Committees </div>

This script works, but it’s replacing all instances of | and replacing the entire contents of every h3 on the page with the content of the first headline. How can I limit the scope of the script to affect only the first | and leave the headlines text content unaltered?

jQuery('h3').html(jQuery('h3').html().replace('|', "</h3><div>"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>New Clause 12 - Monitoring tool | Order | Committees</h3>
Tags:

2

Answers


  1. 0

    Your approach unfortunately doesn’t work as you can’t split elements as you’re attempting. You can only amend/insert entire elements.

    To do what you require, select the h3 element, get the text you require from it and place that in to a new div which you insert after the h3, like this:

    $('h3').each((i, h3) => {
  let $h3 = $(h3);
  let text = $h3.text().split('|');
  $h3.text(text[0].trim());
  $('<div />').text(text.slice(1).join('|')).insertAfter($h3);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>New Clause 12 - Monitoring tool | Order | Committees</h3>

<h3>Foo | Bar | Foobar</h3>

<h3>Lorem | Ipsum | Dolor</h3>
    Login or Signup to reply.
  2. 0

    What about just:

    html().replace('|', '</h3><div>').replace(/</h3>$/, '</div>')

    ? (If I understood question correctly)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search