Javascript Search and Replace while selectively skipping links?

AX

Axe

55 1
Asked
Updated
Viewed
11.7k 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.

add a comment
0

2 Answers

  • Votes
  • Oldest
  • Latest
KA

katana

35 0
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;
}
add a comment
1
SF

SpooF

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 ^^

add a comment
0