AX
55 1
Asked
Updated
Viewed
10.9k times

I'm looking to do a search & replace on one of my sites so I can implement some kind of glossary system.

Here's the basic code I've got so far for a quick test page...

<html>
<head>
<script language="javascript">
  function replace_stuff() {
    document.body.innerHTML = document.body.innerHTML.replace(/test/g,'sample');
  }
</script>

</head>
  <body onLoad="javascript:replace_stuff();">
     Line 1 : test<br />
     Line 2 : <a href="http://www.test.com/">http://www.test.com/</a>
  </body>
</html>

But, there's a problem with this.

Line 1 works perfectly. It replaces "test" with "sample", and all is well with the world.

The problem is with Line 2. If the text is inside a link, either as the actual URL or as part of the anchor text, I want it to completely skip over it and not replace it. Line 2 should remain untouched.

Anybody got any ideas on how to do this one?

Btw, the query has changed slightly...

   document.body.innerHTML = document.body.innerHTML.replace(/\b(test)\b/g, 'sample');

So, now something like "testicles" (sorry, couldn't think of another word), doesn't get turned into sampleicles, however because of the .'s in http://www.test.com, that still gets changed to http://www.sample.com.

  • 0
    Is there a way to replace everything but something in a certain tag? Then you can run a if statment that says if NOT, then run your replace? — SpooF
  • 0
    lol, isn't that basically what I asked? — Axe
  • 0
    Well I mean something that can pick through your code, and take all your links out and store everything else in side its a varilbe then go though that varible and replace things. — SpooF
  • 0
    You mean storing it in chunks in an array? Doable, but there's got to be a more elegant solution using regexp. — Axe
add a comment
0

2 Answers

  • Votes
  • Oldest
  • Latest
Answered
Updated

I wrote a script that converts British words in an HTML page into their American equivalents, on the fly. It ignores anything between tags. You can maybe hack it to suit what you need:

// American_English.js
// Written by Darren M. King, 2004

// CONSTANTS
var ENGLISH_TO_AMERICAN = 0;
var AMERICAN_TO_ENGLISH = 1;

var english = new Array();
var american = new Array();

// START OF DICTIONARY
english[0] = "colour";
american[0] = "color";
english[1] = "centre";
american[1] = "center";
english[2] = "capitalise";
american[2] = "capitalize";
english[3] = "americanised";
american[3] = "americanized";
// END OF DICTIONARY

function doReplace() {
	var lan;
	if(navigator.systemLanguage) {
		lan = navigator.systemLanguage.toLowerCase();
	}
	else {
		if(navigator.language)
			lan = navigator.language.toLowerCase();
		else 
			lan = navigator.userLanguage.toLowerCase();
	}
	if(lan == "en-us")
		replaceWords(ENGLISH_TO_AMERICAN);
}	

function replaceWords(changeType) {
	var bodyText = document.body.innerHTML;
	var i;
	var fromArr;
	var toArr;
	if(changeType == ENGLISH_TO_AMERICAN) {
		fromArr = english;
		toArr = american;
	}
	else {
		fromArr = american;
		toArr = english;
	}
	for(i=0; i<fromArr.length; i++) {
		bodyText = replaceString(bodyText, fromArr[i], toArr[i]);
	}
	document.body.innerHTML = bodyText;
	//alert(bodyText);
}

function replaceString(haystack, needle, replacement) {
	var newText = "";
	var i= -1;
	var temp_needle = needle.toLowerCase();
	while(haystack.length > 0) {
		var temp_haystack = haystack.toLowerCase();
		i = temp_haystack.indexOf(temp_needle);
		//if not found, add whole string
		if(i == -1) {
			newText += haystack;
			haystack = "";
			break;
		}
		// if i is between first < and first >
		if(haystack.indexOf(">", i) < haystack.indexOf("<", i)) {
			newText += haystack.substr(0, haystack.indexOf(">")+1);
			haystack = haystack.substr(haystack.indexOf(">")+1);
		}
		else {
			// make a temporary copy of replacement word
			repWord = haystack.substr(i, needle.length);
			// Assume replacement always start with same character as needle
			temp_rep = repWord.charAt(0)+replacement.substr(1);
			// ensure the case of the replacement matches the case of the original
			newText += haystack.substr(0, i) + temp_rep;
			haystack = haystack.substr(i+needle.length);
		}
	}
	return newText;
}
  • 0
    Hey, that's real nice of you, thanks Katana 🙂 — Axe
  • 0
    No prob 😁 — katana
add a comment
1
SF
25 0
Answered
Updated

I've been looking for a better way to do this but this is all I can find:

<html>
<head>
<script language="javascript">
  function replace_stuff() {
    document.body.innerHTML = document.body.innerHTML.replace(/\b(test)\b/g, 'sample'); 
	document.body.innerHTML = document.body.innerHTML.replace(/\b(.sample.)\b/g, '.test.'); 

  }
</script>

</head>
  <body onLoad="javascript:replace_stuff();">
     Line 1 : test</b> <br />
     Line 2 : <a href="http://www.test.com/">http://www.test.com/</a><br />
     Line 3 : tests<br />
  </body>
</html>

Basically just replace the test back in your links ^^

  • 0
    The problem is, when I end up with 500 words in that glossary, having an extra 500 lines to change things BACK that it caught the wrong way the first time is not going to be that efficient 🙂 — Axe
add a comment
0