...

View Full Version : Find and change text in a HTML page



Jesper Møller
01-07-2007, 07:56 PM
Im woud like to make a script that can find text in a HTML document and change it

The text i shal finde will be text that are inside 2 asterix (**text to find**)

when it find text inside ** it shal du one of to things..
If the ** string is NOT inside a <h4></h4> tag .. it shal remove it (incl the **)
If the ** string IS inside a <h4></h4> it shal change it to an image tag.

Eksample
<h4><a href="some url">**url/pic.gif 20 25 icon** My link</a></h4>
shud be change to
<h4><a href="some url"><img src="url/pic.gif" width="20" height="25" alt="icon" /> My link</a></h4>

<p>**url/pic.gif 20 25 icon** My link</p>
shud be change to
<p> My link</p>

hope someone can help mee

david_kw
01-08-2007, 07:39 AM
It's pretty brute force with no error checking but hopefully it will get you started.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Junque</title>
<script type="text/javascript">
/* <![CDATA[ */
function replaceAst(s, bDoImg) {
var str = "";

for (var i = 0; i < s.length - 1; i++) {
if (s.charAt(i) == '*' && s.charAt(i + 1) == '*') {
if (bDoImg) {
while (s.charAt(i) == '*') i++;
var index = s.indexOf("**", i);
var subS = s.substr(i, index - i);
i += index - i + 1;
var a = subS.split(" ");
str = str.concat('<img src="' + a[0] + '" width="' + a[1] + '" height="' + a[2] + '" alt="' + a[3] + '" />');
} else {
for (i++ ; i < s.length - 1; i++) {
if (s.charAt(i) == '*' && s.charAt(i + 1) == '*') {
i++;
break;
}
}
}
} else {
str = str.concat(s.charAt(i));
}
}

return(str);
}

function doIt() {
var eles = document.getElementsByTagName("h4");
for (var i = 0; i < eles.length; i++) {
eles[i].innerHTML = replaceAst(eles[i].innerHTML, true);
}
var e = document.getElementsByTagName("body")[0];
e.innerHTML = replaceAst(e.innerHTML, false);
}
/* ]]> */
</script>
</head>
<body>
<div>
<button onclick="doIt();">Do it</button>
<br />
<div id="adiv"> </div>
<h4><a href="some url">**url/pic.gif 20 25 icon** My link</a></h4>
<p>**url/pic.gif 20 25 icon** My link</p>
</div>
</body>
</html>


david_kw

Jesper Møller
01-08-2007, 07:47 AM
Thanks ..
Im shur it will get me started :thumbsup:

Kor
01-08-2007, 12:32 PM
I would have used a regular expression and DOM methods:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="txt/javascript">
<script type="text/javascript">
function replaceText(){
var re=/\*\*+.+\*\*/;
var att=['src','width','height','alt'];
var elems=document.getElementsByTagName('*');
var i=0, e;
while(e=elems[i++]){
var j=0, k, s, p;
while(k=e.childNodes[j++]){
if(k.nodeType==3&&k.nodeValue.match(re)){
if(checkParents(k)){
s=k.nodeValue.split('**')[1].split(' ');
p=document.createElement('img');
setAtt(p,att,s);
k.parentNode.replaceChild(p,k);
}
else{k.data=k.data.replace(re,'');}
}
}
}
}
function checkParents(k){
var p=k.parentNode;
while(p.nodeName!='BODY'){
if(p.nodeName=='H4'){return true}
p=p.parentNode;
}
return false
}
function setAtt(p,att,s){
for(var i=0; i<att.length; i++){
p.setAttribute(att[i],s[i]);
}
}
</script>
</head>
<body>
<button onclick="replaceText();">Replace Text</button>
<br>
<h4><a href="some url">**url/pic.gif 20 25 icon** My link</a></h4>
<br>
<p>**url/pic.gif 20 25 icon** My link</p>
</body>
</html>

david_kw
01-08-2007, 06:15 PM
Nice. I really have to start thinking of the DOM way first. :) I'm way too brute force.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum