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?

I am not sure about your specific requirement of replace, but instead of replace its better to get the div's values (e.g. First, Second etc.) and concat them using '*%^%' — Rahul R.
– Rahul R., Commented Dec 21, 2016 at 8:49

Pranav C Balan · Accepted Answer · 2016-12-21 08:08:59Z

5

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>

edited Dec 21, 2016 at 8:08

answered Dec 21, 2016 at 7:18

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Kim Over a year ago

I just noticed that .replaceWith changes the element itself. I am looking to have it as a variable and not alter the html (I should have been more clear in the question). I will update the question.

Steve Kim Over a year ago

Sorry for the confusion.

Steve Kim Over a year ago

Thank you =) Appreciate it!

Nitin · Accepted Answer · 2016-12-21 07:39:02Z

2

Create one prototype like :

String.prototype.replaceAll = function (toReplace, replaceWith){
    return this.split(toReplace).join(replaceWith);
}

and your jquery code be like :

  $("div#top_container").each(function( i ) {debugger;
    console.log(this.innerHTML.replaceAll('<div class="example">','*%^%').replaceAll('</div>',' ');)
  });

answered Dec 21, 2016 at 7:39

Nitin

2,9613 gold badges39 silver badges73 bronze badges

Comments

Mairaj Ahmad · Accepted Answer · 2016-12-21 07:44:01Z

2

You can use replaceWith function

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

You can make a clone of container if you don't want to change original div.

var html="";
$(function () {
 var newHtml = $("#top_container").clone();
 $(newHtml).find(".example").replaceWith(function () {
   html+= "%^%" + $(this).text();
   });
});

console.log(html);

edited Dec 21, 2016 at 7:44

answered Dec 21, 2016 at 7:19

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

1 Comment

Steve Kim Over a year ago

I wasn't clear in my question. I updated my question.

Collectives™ on Stack Overflow

replace set of strings in array

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related