动态str替换包含流的html上的javascript

Question

I have a html which looks roughly like this

<div id="wallPostTemplate">
    <li id='comment-content--oOo-id-oOo-' class='comment-content' comment_id='-oOo-id-oOo-'>
        <a class='comment-avatar' href='-oOo-link-oOo-'>
            <img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>-oOo-korisnikPodaci.Slika-oOo-'></a> 
            -oOo-text-oOo-
    </li>
</div>

Now I get the contents of the html into a sting with $('#wallPostTemplate').text() and then I want to replace dynamically the occurrences of the string -oOo-id-oOo- with whatever data I have stored inisde a variable like -oOo-id-oOo- , -oOo-text-oOo- and so on...

Now I tried numerous ways to tackle this thing but I always end up without a solution. Here is my latest try out. HELP pls Q_Q

var regex = new RegExp('{\-oOo\-'+index+'\-oOo\-}', "g");
post = post.replace(regex, value);  

Also I tried str.replace but it does not work... It seems new lines are the problem but I have no idea how to over come this.....

edit:

To make it more simple to understand i made a example on jsfidle: http://jsfiddle.net/DdBFB/ And as you can see, you can see nothing.... it dous not work when you get the content over the html function.

Answer 1

If I understand your question your goal is make something like a post template that will be loaded in runtime/cliente side. So if this is really your goal you can try use the jQuery Template Plugin

Sample for your case: (don´t tested yet)

var tmlpPost = "<div id='${postId}'>" + 
                         "      <li id='comment-content-${postId}' class='comment-content' comment_id='${postId}'>" + 
                         "              <a class='comment-avatar' href='${link}'>" + 
                         "                  img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>${korisnikPodaciSlika}'>" + 
                         "              </a> " + 
                         "              ${postText}" + 
                         "      </li>" + 
                         "</div>";


$.tmpl( tmlpPost, { "postId" : "123" , "link" : "http://posturl.com", "korisnikPodaciSlika" : "something",  "postText" : "Post text goes here..."}).appendTo( "#yourPostWall" );

Or using <script> not a var : See this Fiddle

<script id="tmlpPost" type="text/x-jquery-tmpl">
    <div id='${postId}'>
          <li id='comment-content-${postId}' class='comment-content' comment_id='${postId}'>
                  <a class='comment-avatar' href='${link}'>
                      <img class='small_avatar' src='<?="../" . MESTO_ZA_UPLOAD_FAJLOVA_KORISNIKA ?>${korisnikPodaciSlika}'>
                  </a>
                  ${postText}
          </li>
    </div>
</script>

Now on page load:

$("#tmlpPost").tmpl( { "postId" : "123" , "link" : "http://posturl.com", "korisnikPodaciSlika" : "something",  "postText" : "Post text goes here..."}).appendTo( "#output" );​

Answer 2

Although your question is not really clear I've whipped up an example that replaces a value based on a regular expression.

var source = "-oOo-korisnikPodaci.Slika-oOo-";
var id = "korisnikPodaci.Slika";
var regex = new RegExp('\-oOo\-' + id + '\-oOo\-', "gmi");

// Match
source.replace(regex, "hello world"); // => "Hello World"

// Mismatch
source = "-oO!!!o-korisnikPodaci.Slika-oO!!!o-";
source.replace(regex, "hello world"); // => "-oO!!!o-korisnikPodaci.Slika-oO!!!o-"

Answer 3

ok, i figured the answer was that i set the regex flags wrong, so i went to jsfiddle and fiddled with it and you can see the answer there :)

http://jsfiddle.net/DdBFB/11/

I was missing the multi line flag Q_Q....im no good with regex even in php not to speak in js...