0

Question:

I am trying to get a search filter on checkbox. so everytime a checkbox is clicked the result will be displayed accordingly. So to show the result, I am currently clearing the page with $('#editor-master').html(''); where editor-master is the outermost element. and I have an empty similar html piece inside <script=text/template> so as u all might know browser will ignore this content. And so, for my result I clone this piece of html code like below:

$newTemplate = $template.clone();

$newTemplate will have:

            <div class="featured-box featured-box-primary">
                <div class="box-content">
                    <div class="editor">                    
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-md-9 text-left">
                                    <h4 id="username||id||" value=""></h4>
                                    <i class="icon icon-star"></i>
                                    <i class="icon icon-star"></i>
                                    <i class="icon icon-star"></i>
                                    <i class="icon icon-star"></i>
                                    <i class="icon icon-star-o"></i>
                                    <p class="ratings">
                                    </p>

                                </div>
                                <div class="col-md-3" id="||editor_id||">
                                    <span id="favorite||id||" class="userstar user-favorite-stars"></span>
                                    <span class="usericon"><i class="icon icon-user"></i></span>    
                                </div>
                            </div>                            
                        </div>
                        <div class="row margin-bottom-10">
                            <div class="col-md-12">
                                <dl>
                                    <dt>Credentials</dt>
                                    <dd class="margin-bottom-10" id="credentials||id||"></dd>
                                    <dt>Specialties</dt>
                                    <dd class="margin-bottom-10" id="editor_specialties||id||"></dd>
                                    <dt>No of Words</dt>
                                    <dd class="margin-bottom-10"></dd>
                                    <dt>Description</dt>
                                    <dd id="self_description||id||"></dd>
                                     <!--dt>Approval Date</dt>
                                    <dd id="approval_date||id||"></dd-->
                                </dl>
                                <div class="col-md-12 margin-top-10">
                                    Unavailable until 
                                </div>
                                <div class="col-md-6 margin-top-10">
                                    <a href="" class="btn btn-primary btn-sm" id="submit_doc||id||">Submit a Document</a>
                                </div>
                                <div class="col-md-6 margin-top-10">
                                    <a href="" class="btn btn-primary btn-sm">Free Sample Edit</a>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

I am trying to find all the id attributes which will match ||id|| and replace that with a number which is incremented in the loop, and also ||||editor_id||||

so far I have tried,

$target = $("#editor-master");
$newTemplate.appendTo($target);
$target.replace(/||id||/g,j);
$target.replace(/||editor_id||/g,value.editor.id);
$target.find('h4').text(value.username);

and

$target = $("#editor-master");
$target.append($newTemplate.toString().replace(/||id||/g, j));

Which won't work. Thanks.

Edited to answer the question by "sb": First stringify the html, replace the matched string and revert that back to original html: so here $target.append(t) is the html content I was looking for. 

            var t = $newTemplate.get(0).outerHTML;
            t = t.replace(/\|\|id\|\|/g,j);
            t = t.replace(/\|\|editor_id\|\|/g,value.editor.id);
            //append to target, which will render the html with replaced values.
            $target.append(t);
user2067888
  • 1,085
  • 3
  • 11
  • 17

1 Answers1

2

| is a special character and has to be escaped: \|

For example, in "aa||id||bb", you can find ||id|| with /\|\|id\|\|/

When working with regular expressions, you can always use tools like Lea Verou's http://leaverou.github.io/regexplained/ to help you.

CunningFatalist
  • 453
  • 1
  • 9
  • 21
  • I understand that but even if I escape pipe, It won't replace anything. also, I see that `[object Object]` is getting printed, because I am doing `"$target.append"` on the object `$newTemplate` which can't be used without doing `toString()` in order to make it work with `replace()`, can you suggest some work around? – user2067888 Jul 18 '14 at 12:47
  • You will want to find elements within $target, get their .attr('id') value and check that with your regular expression. – CunningFatalist Jul 18 '14 at 12:54
  • So you are saying I will have to find each and every element with .attr('id') and replace ||id|| with the value? but, is there a way where I can replace all the matched values altogether? like in`/||id||/g` `"g"`I was using to match and replace globally. – user2067888 Jul 18 '14 at 13:00
  • I think the best idea would be to make an html string, check everything, and make it real elements again. The answer to this question might be helpful: http://stackoverflow.com/questions/652763/jquery-object-to-string - I hope this helps you! – CunningFatalist Jul 18 '14 at 13:04
  • Gotcha! one last question, I could convert the html to string and saw that id was getting replaced. but how should I revert the string back to html? i did not quite get the remove() part explained in the link. Thanks so much for the efforts, it was brilliant. :) – user2067888 Jul 18 '14 at 13:35
  • You are very welcome! :) You can do something like var str = $('.select').clone().html();, replace what you want to replace, and then turn it into elements again via $('.new-elements-here').append(str); – CunningFatalist Jul 18 '14 at 13:41