I'm trying to create a sort of 'template' in plain old html, which can then have elements inserted by another javascript function.
So, I've got
var string = "<div id='<@nameInsert>' style='padding: 2px;'>here's some text and stuff</div>";
And in a function I'm trying to replace <@nameInsert> with the name I'm using...
string.replace("/<@nameInsert>", "525");
But, it don't work. Some sort of escaping thing, wrong idea this, or what?
It doesn't work because you are trying to replace a string that doesn't exist in the other string.
I think that you are mixing two different ways of replacing. You can replace using a string:
string.replace("<@nameInsert>", "525");
and you can replace using a regular expression:
string.replace(/<@nameInsert>/, "525");
The part with slashes is a regular expression literal, which gives the same result as:
string.replace(new RegExp("<@nameInsert>"), "525");
You might prefer the regular expression, as you can then specify the global flag, which will make it replace every occurance, not just the first one:
string.replace(/<@nameInsert>/g, "525");
replace method doesn't care that the string happens to contain HTML code; text inside the tag is not handled differently. Note that the replace method doesn't change the string, it returns the new string. You have to use the return value: string = string.replace(/text/g, 'woohaa!');.Don't use quotes if you want to use regular expressions
string.replace(/<@nameInsert>/, "525");
But in your case you don't really need regular expressions. Just use a string:
string.replace("<@nameInsert>", "525");
for me it works ok like this,
string=string.replace("<@nameInsert>", "525");
here is an example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
function test(){
var string = "<div id='<@nameInsert>' style='padding: 2px;'>here's some text and stuff</div>";
string=string.replace("<@nameInsert>", "525");
alert(string);
}
</script>
</head>
<body>
<input type="button" value="test" name="test" onclick="test()">
</body>
</html>
It doesn't matter if you use slash (/) or quote (") for this since you only have one string to replace.. but just make sure you understand the replace method.. it won't replace the existing string, but rather return a modified copy of it.. so you can do it like this:
string = string.replace(/<@nameInsert>/, "525");
