• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 273
  • Last Modified:

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?
0
n00b0101
Asked:
n00b0101
  • 6
  • 5
  • 3
6 Solutions
 
ZvonkoSystems architectCommented:
For that replacement you need only ONE RegEx but you do not replace Strings; yo want to rename IDs and Names!
That would not go easily...

The RegExp for your rename is:

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

Open in new window

0
 
n00b0101Author Commented:
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...
0
 
ZvonkoSystems architectCommented:
My RegExp renames 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

Show what you expect.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
ZvonkoSystems architectCommented:
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

0
 
ZvonkoSystems architectCommented:
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

0
 
n00b0101Author Commented:
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

0
 
ZvonkoSystems architectCommented:
So you have this:
<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

And you want this:
<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>
<div id="section-2-master">
  <span class="section_2-span">Title</span>
  <form id="section-2-formadd">
   <input name="section_2[item][62]" id="section-2-item-1" value="Enter Section 1 / Item 1" />
 </form>
</div>

Open in new window

That is NOT renaming ids but cloning one <form> to two <form><form>s???
0
 
n00b0101Author Commented:
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

0
 
RobOwner (Aidellio)Commented:
It was just the way you were accessing the attributes in the javascript

see here: http://jsfiddle.net/rjurd/dJrMs/
var cloneUp = 2;

function createNewSection() {

    var newSection = $('#section-1-master').clone();
    newSection.attr('id','section-' + cloneUp + 'master');
    newSection.find('span').removeClass();
    newSection.find('span').addClass('section_' + cloneUp + '-span');
    newSection.find('form').attr('id','section-' + cloneUp + '-formadd');
    newSection.find('input').eq(0).attr('id','section-' + cloneUp + '-item-1');
    newSection.find('input').eq(0).attr('name','section[' + cloneUp + '][item][62]');
    newSection.find('input').eq(0).attr('value','Enter Section ' + cloneUp + ' / Item 1');
    cloneUp++;

    $('#sections').append(newSection);

}

Open in new window

0
 
ZvonkoSystems architectCommented:
Here my method:
<html>
<head>
<title>Zvonko &#42;</title>
<script>
var strFirstFormSection;
function cloneFormSection(cloneUpNum){
  var theForm = document.forms[0];
  var theText = theForm.innerHTML;
  if(!strFirstFormSection){
    strFirstFormSection = theText;
  }
  theText = strFirstFormSection.replace(/section-1/g,'section-'+cloneUpNum);
  theText = theText.replace(/section[_\[]1\]?/g,'section_'+cloneUpNum);
  theText = theText.replace(/\bSection 1\b/g,'Section '+cloneUpNum);
  theForm.innerHTML+=theText;
}

window.onload=function(){
  for(var i=2;i<9;i++){
    cloneFormSection(i);
  }
}
</script>
</head>
<body>
<form>
<div id="section-1-master">
  <span class="section_1-span">Title for Section 1</span>
   <input name="section[1][item][62]" id="section-1-item-1" value="Enter Section 1 / Item 1" />
</div>
</form>
</body>
</html>

Open in new window

0
 
n00b0101Author Commented:
neither of these give me what I need... thanks anyway.
0
 
RobOwner (Aidellio)Commented:
What are you after then?  I based my method on your last post...
0
 
n00b0101Author Commented:
none of these worked for me, but i appreciate the help
0
 
RobOwner (Aidellio)Commented:
ok... why did you close the question?  Why did these not work for you?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now