replace set of strings in array

Question

Using $('div#top_container').html(), I get the following as an example:

<div class="top" id="top_container">
    <div class="example">First</div>
    <div class="example">Second</div>
</div>

giving...

<div class="example">First</div>
<div class="example">Second</div>

Here, using .replace(), I want to replace <div class="example"> with *%^% (random set of characters) and remove </div>:

var content = $('div#top_container').html();                
var clean_1 = content.replace('<div class="example">','*%^%'); //add $*!#$
var clean_2 = clean_1.replace('</div>',' '); //remove </div>

giving...

console.log(clean_2); --> *%^%First*%^%Second

Now, the number of example div elements can vary and I need to first find out how to target them all. Also is there a cleaner way to target both <div class="example"> and </div> at the same time?

EDIT:

I am not looking to change the html itself, but rather have the edited version as a variable that I can do stuff with (such as send it to php via ajax).

How would I do this?

Answer 1

Use replaceWith() method with a callback and generate prefered text string by getting text content using text() method.

$('div.example').replaceWith(function(v) {
  return '%^%' + $(this).text();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="example">First</div>
  <div class="example">Second</div>
</div>

---

UPDATE: If you don't want to update the original element then use clone() and do the remaining thinks on the cloned element.

var res = $('#parent')
  // clone element
  .clone()
  // get element with `example` class
  .find('.example')
  // update content
  .replaceWith(function(v) {
    return '%^%' + $(this).text();
  })
  // back to previos selector and get html content
  .end().html();

console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div class="example">First</div>
  <div class="example">Second</div>
</div>