Andrew said:
Say I have a page, which has been created by a third party, and the page
may contain some pre-specified text. How can I find and replace that
text dynamically? For example, if the page I have contains this HTML:
<div id=”oDiv” style="margin-bottom:10px;">{when}</div>
<div>
<table style="border:1px solid gray">
<tr>
<td>blah</td>
<td><img src="img.gif" title="image"></td>
</tr>
<tr>
<td style="background-color:#F3F3F3;">Visit us
<strong>{when}</strong>.</td>
</tr>
<table>
</div>
how can I replace all occurances of {when} with, say, NOW without
"upsetting" any of the existing tags?
IE/Win with its TextRange implementation allows that easily
<
http://msdn.microsoft.com/library/d...hor/dhtml/reference/objects/obj_textrange.asp>
at least as long as the string to be replaced is inside the same element.
Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Text range manipulation with IE/Win</title>
<script type="text/javascript">
function replaceStringInElement (containerElement, stringToBeReplaced,
replacementString) {
var range;
var replaceCounter = 0;
if (document.body && document.body.createTextRange &&
(range = document.body.createTextRange()))
{
range.moveToElementText(containerElement);
while (range.findText(stringToBeReplaced)) {
range.text = replacementString;
replaceCounter++;
}
}
return replaceCounter;
}
window.onload = function (evt) {
var divToSearch;
if (document.getElementById && (divToSearch =
document.getElementById('exampleDiv1'))) {
var replaceCount = replaceStringInElement(divToSearch, '{when}',
'now');
alert('Replaced ' + replaceCount + ' string(s).');
alert(divToSearch.outerHTML);
}
};
</script>
</head>
<body>
<h1>Text range manipulation with IE/Win</h1>
<div id="exampleDiv1">
<div id="oDiv" style="margin-bottom:10px;">{when}</div>
<div>
<table style="border:1px solid gray">
<tr>
<td>blah</td>
<td><img src="img.gif" title="image" alt="image"></td>
</tr>
<tr>
<td style="background-color:#F3F3F3;">Visit us
<strong>{when}</strong>.</td>
</tr>
</table>
</div>
<p>Too difficult? <b>{</b><span>w</span>hen}</p>
</div>
</body>
</html>
Three replacements are made where for the first two the markup is
preserved while <b>{</b><span>w</span>hen} then ends up as <b>now</b> I
think as. You would need to add logic to prevent that replacement or you
would need to add logic and make use of pasteHTML to replace the HTML
markup in that case.
