Find and change text in a HTML page

Jesper Møller · 01-07-2007, 06: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, 06:39 AM

It's pretty brute force with no error checking but hopefully it will get you started.

Code:

<!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, 06:47 AM

Thanks ..
Im shur it will get me started

Kor · 01-08-2007, 11:32 AM

I would have used a regular expression and DOM methods:

Code:

<!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, 05:15 PM

Nice. I really have to start thinking of the DOM way first. :) I'm way too brute force.