Javascript Search and Replace while selectively skipping links?

AX

Axe

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

User

Community
Q/A Forum Wiki / Tutorials Code Snippets Discussion Forum Meta / Admin Search Tags Badges

Market

Themes / Templates Stock Photos Vector Graphics 3D Models Scripts & Plugins Become a Seller Become an Affiliate

Help Center

Community Guide Reputation Privileges Attribution License Overview Copyright & Trademarks Market Support

Legal
Terms of Use Acceptable Use Policy Privacy Policy Refund Policy Cookie Policy Seller Terms Affiliate Terms

Company

About Us Contact Us Unmelted Press

Social Media

Facebook Twitter Pinterest Telegram
\n\n\n \n Line 1 : test
\n Line 2 : http://www.test.com/\n \n\n```\n\nBut, there's a problem with this.\n\nLine 1 works perfectly. It replaces \"test\" with \"sample\", and all is well with the world.\n\nThe 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.\n\nAnybody got any ideas on how to do this one?\n\nBtw, the query has changed slightly...\n\n```\n document.body.innerHTML = document.body.innerHTML.replace(/\\b(test)\\b/g, 'sample');\n```\n\nSo, 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`.","upvoteCount":0,"answerCount":2,"suggestedAnswer":[[{"@type":"Answer","url":"https://www.ozzu.com/questions/200402/javascript-search-and-replace-while-selectively-skipping-links#post-200656","datePublished":"2005-02-28T08:20:41+00:00","dateModified":"2025-10-15T21:03:26+00:00","author":{"@type":"Person","name":"katana"},"text":"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:\n\n```javascript\n// American_English.js\n// Written by Darren M. King, 2004\n\n// CONSTANTS\nvar ENGLISH_TO_AMERICAN = 0;\nvar AMERICAN_TO_ENGLISH = 1;\n\nvar english = new Array();\nvar american = new Array();\n\n// START OF DICTIONARY\nenglish[0] = \"colour\";\namerican[0] = \"color\";\nenglish[1] = \"centre\";\namerican[1] = \"center\";\nenglish[2] = \"capitalise\";\namerican[2] = \"capitalize\";\nenglish[3] = \"americanised\";\namerican[3] = \"americanized\";\n// END OF DICTIONARY\n\nfunction doReplace() {\n\tvar lan;\n\tif(navigator.systemLanguage) {\n\t\tlan = navigator.systemLanguage.toLowerCase();\n\t}\n\telse {\n\t\tif(navigator.language)\n\t\t\tlan = navigator.language.toLowerCase();\n\t\telse \n\t\t\tlan = navigator.userLanguage.toLowerCase();\n\t}\n\tif(lan == \"en-us\")\n\t\treplaceWords(ENGLISH_TO_AMERICAN);\n}\t\n\nfunction replaceWords(changeType) {\n\tvar bodyText = document.body.innerHTML;\n\tvar i;\n\tvar fromArr;\n\tvar toArr;\n\tif(changeType == ENGLISH_TO_AMERICAN) {\n\t\tfromArr = english;\n\t\ttoArr = american;\n\t}\n\telse {\n\t\tfromArr = american;\n\t\ttoArr = english;\n\t}\n\tfor(i=0; i 0) {\n\t\tvar temp_haystack = haystack.toLowerCase();\n\t\ti = temp_haystack.indexOf(temp_needle);\n\t\t//if not found, add whole string\n\t\tif(i == -1) {\n\t\t\tnewText += haystack;\n\t\t\thaystack = \"\";\n\t\t\tbreak;\n\t\t}\n\t\t// if i is between first < and first >\n\t\tif(haystack.indexOf(\">\", i) < haystack.indexOf(\"<\", i)) {\n\t\t\tnewText += haystack.substr(0, haystack.indexOf(\">\")+1);\n\t\t\thaystack = haystack.substr(haystack.indexOf(\">\")+1);\n\t\t}\n\t\telse {\n\t\t\t// make a temporary copy of replacement word\n\t\t\trepWord = haystack.substr(i, needle.length);\n\t\t\t// Assume replacement always start with same character as needle\n\t\t\ttemp_rep = repWord.charAt(0)+replacement.substr(1);\n\t\t\t// ensure the case of the replacement matches the case of the original\n\t\t\tnewText += haystack.substr(0, i) + temp_rep;\n\t\t\thaystack = haystack.substr(i+needle.length);\n\t\t}\n\t}\n\treturn newText;\n}\n```","upvoteCount":1}],[{"@type":"Answer","url":"https://www.ozzu.com/questions/200402/javascript-search-and-replace-while-selectively-skipping-links#post-200450","datePublished":"2005-02-27T11:59:51+00:00","dateModified":"2025-10-15T21:03:26+00:00","author":{"@type":"Person","name":"SpooF"},"text":"I've been looking for a better way to do this but this is all I can find:\n\n```html\n\n\n\n\n\n \n Line 1 : test
\n Line 2 : http://www.test.com/
\n Line 3 : tests
\n \n\n```\n\nBasically just replace the test back in your links ^^","upvoteCount":0}]]}}