How to replace html content with escape char in jquery

Question

We need to replace portion of the html content with jquery.

original_string = '<option value=\"\"><\/option>\n'
replacing_string = '<option value=""></option> <option value="11">2012/05/09</option> <option value="6">2012/07/03</option> '
$('#id').html().replace(original_string, replacing_string);

The problem is that there are bunch of escape chars in both original and replacing string and the html().replace can not be executed. How to replace a string with escape characters? Thanks.

Basically we are dynamically adding an empty select option to the page. Based on user input, a select options need to be inserted into the content and be rendered to the screen. The html manipulation happens before rendering.

UPDATE: html content(sorry, it is massy)

<div id="invoice_against_lease" style="display: none;">
<a onclick="add_nest_fields(this, "invoice_items", "<div class=\"fields\">\n<div class=\"input select optional\"><label class=\"select optional\" for=\"invoice_invoice_items_attributes_new_invoice_items_lease_usage_record_id\">Record#：<\/label><select class=\"select optional\" id=\"invoice_invoice_items_attributes_new_invoice_items_lease_usage_record_id\" name=\"invoice[invoice_items_attributes][new_invoice_items][lease_usage_record_id]\"><option value=\"\"><\/option>\n<\/select><\/div>\n<input id=\"invoice_invoice_items_attributes_new_invoice_items__destroy\" name=\"invoice[invoice_items_attributes][new_invoice_items][_destroy]\" type=\"hidden\" value=\"false\" /><a href=\"#\" onclick=\"remove_nest_fields(this); return false;\">Delete<\/a>\n<\/div>\n"); return false;" href="#">Add Record</a>
</div>

do you not have the option to build the elements via var yourOption = $("option"); ? — Brandt Solovij
– Brandt Solovij, Commented Jul 26, 2012 at 19:28
It's not too clear what you are trying to do here. Are you trying to manipulate string content or actually manipulate the HTML in the DOM? — Lix
– Lix, Commented Jul 26, 2012 at 19:30
Not sure if its related (could just be a copy paste mistake), but you are missing some semicolons at the end of the first two lines of code... — Lix
– Lix, Commented Jul 26, 2012 at 19:32
If you're wanting to replace one element with another element, select the one to replace and use .replaceWith, makes it much easier than trying to match exact html — MrOBrian
– MrOBrian, Commented Jul 26, 2012 at 19:33
We need to replace portion of the html content of the element. We want to replace an empty select option wiht a list of options. — user938363
– user938363, Commented Jul 26, 2012 at 19:36

ShaneBlake · Accepted Answer · 2012-07-26 19:44:50Z

4

If $('#id') is a reference to your <select... then you should be able to simply replace all of your options with $('#id').html(replacing_string);

EDIT:

If $('#id') is the id of the parent div, then the code only slightly changes :

$('#id select').html(replacing_string);

( unless, of course, you have more than one select in that div, then you'd have to provide more detail so that we can help you with the correct selector... )

edited Jul 26, 2012 at 19:44

answered Jul 26, 2012 at 19:33

ShaneBlake

11.1k2 gold badges29 silver badges43 bronze badges

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

2 Comments

user938363 Over a year ago

NO, the #id is not the reference of select element. The whole content is within a div and is a dynamically added selection option and label. We want to insert a selection options and replace the empty one.

sabithpocker Over a year ago

@user938363 Add a snap shot of the HTML at the time this is executed, that should be helpful

Collectives™ on Stack Overflow

How to replace html content with escape char in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related