asked on

replace all instances of text using jquery

I'm trying to replace all instances of a particular string and have tried a number of ways to do it, but more often than not, I get an error saying replace isn't a function...

For example, in the following HTML:

<div id="section-1-master">
  <span class="section_1-span">Title</span>
  <form id="section-1-formadd">
   <input name="section[1][item][62]" id="section-1-item-1" value="Enter Section 1 / Item 1" />
 </form>
</div>

Open in new window

I want to replace all instances of:

section-1 with section-2
section_1 with section_2
section[1] with section_2

I've tried many variations of essentially the same thing, but here is the most recent attempt:

var cloneUp = 2;
      var cloneCount = 1;

      var array = { };
            array["section-" + cloneCount] = "section-" + cloneUp;
            array["section_" + cloneCount] = "section_" + cloneUp;
            array["section\\[" + cloneCount] = "section\[" + cloneUp;

      for(var val in array) {
            $('#section-1-master').each(function() {
                  $(this).find('*').replace(new RegExp(val, "gi"), array[val]));
                  $(this).find('*').replace(new RegExp(val, "gi"), array[val]));
            });
      };

The above yields:

missing ; before statement
[Break On This Error] $(this).find('*').replace(new RegExp(val, "gi"), array[val]));

Open in new window

I also tried:

$('#section-1-master').find('*').each(function() {
		for(var val in array) {
			$(this).replace(new RegExp(val, "gi"), array[val]));
			$(this).replace(new RegExp(val, "gi"), array[val]));
		}
	});

Open in new window

and various other iterations... Can anyone point me in the right direction?

ASKER CERTIFIED SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

n00b0101

ASKER

This doesn't work for me... It replaces everything with section-2, when it should replace it with section+thecharacter+cloneUp

I can't get the regexp to search for the section+character+clonecount and replace it with section+character+cloneup...

So, if:

cloneCount = 1
cloneUp = 2

Open in new window

I'm trying to search replace:

'section-'+cloneCount with 'section-'+cloneUp
'section_'+cloneCount with 'section_'+cloneUp
'section['+cloneCount with 'section['+cloneUp

Open in new window

But, everything I've tried results in a missing : error, a replace is not a function error, or a $(this) is undefined error...

SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zvonko

Sorry, I missed the underscore two renaming.

Ccheck this:

$('#section-1-master').find('*').each(function() {
			$(this).id=$(this).id.replace(/section-1/,'section-2').replace(/section[_\[]1\]?/,'section_2');
			$(this).name=$(this).name.replace(/section-1/,'section-2').replace(/section[_\[]1\]?/,'section_2');
	});

Open in new window

Zvonko

That RegExp does rename this:

<input name="section[1][item][62]" id="section-1-item-1" value="Enter Section 1 / Item 1" />

Open in new window

To this:

<input name="section_2[item][62]" id="section-2-item-1" value="Enter Section 1 / Item 1" />

Open in new window

n00b0101

ASKER

Doesn't work for me...

function createNewSection() {

	var cloneUp = 2;
  
  	var newSection = $('#section-1').clone(function() {
  			$(this).find('*').each(function() {
				$(this).id=$(this).id.replace(/section-1/,'section-'+cloneUp).replace(/section[_\[]1\]?/,'section_'+cloneUp);
				$(this).name=$(this).name.replace(/section-1/,'section-'+cloneUp).replace(/section[_\[]1\]?/,'section_'+cloneUp);
			});
	});
			
	$('#sections').append(newSection);

}

Open in new window

SOLUTION

Zvonko

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

n00b0101

ASKER

No....

I have this:

<form>
<div id="section-1-master">
  <span class="section_1-span">Title</span>
   <input name="section[1][item][62]" id="section-1-item-1" value="Enter Section 1 / Item 1" />
</div>
</form>

Open in new window

And want this:

<form>

<div id="section-1-master">
  <span class="section_1-span">Title</span>
   <input name="section[1][item][62]" id="section-1-item-1" value="Enter Section 1 / Item 1" />
</div>

<div id="section-2-master">
  <span class="section_2-span">Title</span>
   <input name="section[2][item][62]" id="section-2-item-1" value="Enter Section 2 / Item 2" />
</div>

</form>

Open in new window

SOLUTION