/    Sign up×
Community /Pin to ProfileBookmark

Auto-links?

Copy linkTweet thisAlerts:
Feb 18.2006

How would I use an externl js file to automatically make EVERY instance of, “joe” a link to: “www.joe.com”??

-Thanks

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@rcracingfan24authorFeb 18.2006 — please help me, I need to get this project done tonight.
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — I will let you do the actual conversion. The following script, though, will find all of the occurrences for which you are looking:
<i>
</i>var autoLinkCount = 0;
//
function convertTextStringToHyperLink(textNode, str, href) {
var p = textNode.data.indexOf(str);
alert("String '" + str + "' found in TextNode of &lt;" + textNode.parentNode.tagName + "&gt; tagn" +
"at position offset " + p + " in the following TextNode data:n" +
"TextNode.data ("+textNode.data.length+") = '" + textNode.data + "'");
++autoLinkCount;
return;
}
function findTextNodesRecursively(childNodes, str, href) {
var x, len = childNodes.length;
for (x=0; x&lt;len; ++x) {
if (childNodes[x].nodeName != '#text') {
if (childNodes[x].childNodes) {
findTextNodesRecursively(childNodes[x].childNodes, str, href);
}
} else {
if (0 &lt;= childNodes[x].data.indexOf(str)) {
convertTextStringToHyperLink(childNodes[x], str, href);
}
}
}
return;
}
window.onload = function() {
findTextNodesRecursively(document.body.childNodes, 'joe', 'www.joe.com');
alert(autoLinkCount + " occurrences found.");
return true;
}
Copy linkTweet thisAlerts:
@JUDFeb 18.2006 — [CODE]
<script type="text/javascript">
var txt = document.getElementsByTagName('body')[0].childNodes[0];
var textNodes = new Array();

walk(document.getElementsByTagName('body')[0]);
makeLink();

function walk(node)
{
if(node.childNodes.length > 0)
{
for(var i = 0; i < node.childNodes.length; i++)
{
walk(node.childNodes[i]);
}
}

if(node.nodeName == '#text')
{
textNodes.push(node);
}
}

function makeLink()
{
for(var i = 0; i < textNodes.length; i++)
{
var readIn = textNodes[i].nodeValue;
var splitUp = readIn.split(" ");

for(var j = 0; j < splitUp.length; j++){
if(splitUp[j] == "joe") splitUp[j] = "<a href="http://www.joe.com">joe</a>";
}

textNodes[i].parentNode.innerHTML = splitUp.join(" ");
}
}
</script>
[/CODE]
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — Correct me if I've missed something, but... It seems that this part of your code will not work because it will wipe out other child nodes under the same parent node.

textNodes[i].parentNode.innerHTML = splitUp.join(" ");



In other words, if you have something like this:

[code=html]
<p>tom, harry, joe, dick<br>
larry, moe, and charles.</p>
[/code]
This represents a parent node for the <P> tag and three child nodes -- the first and last, of which, are text nodes and the middle child node is an HTMLBRElement node. When your code finishes with this parent node, the last two child nodes will be lost.

Is this not correct?
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — Well, in fact, I decided to actually try your code. The first line can be deleted because the [b]txt[/b] variable you are assigning is not used anyway. However, using the HTML example I posted above, your code procedes to error out when the situation I described above causes an object reference in yoor array to no longer be pointing to a valid object. In other words, yes, your code does wipe out the remainder of the child nodes in a parent node that has more than one child node within it.
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — Lastly, I'll state that your idea of saving the text node references for later processing is a good one. This will, at least, prevent the possibility of endlessly replacing the same text string over and over again. ?
Copy linkTweet thisAlerts:
@rcracingfan24authorFeb 18.2006 — [CODE]
<script type="text/javascript">
var txt = document.getElementsByTagName('body')[0].childNodes[0];
var textNodes = new Array();

walk(document.getElementsByTagName('body')[0]);
makeLink();

function walk(node)
{
if(node.childNodes.length > 0)
{
for(var i = 0; i < node.childNodes.length; i++)
{
walk(node.childNodes[i]);
}
}

if(node.nodeName == '#text')
{
textNodes.push(node);
}
}

function makeLink()
{
for(var i = 0; i < textNodes.length; i++)
{
var readIn = textNodes[i].nodeValue;
var splitUp = readIn.split(" ");

for(var j = 0; j < splitUp.length; j++){
if(splitUp[j] == "joe") splitUp[j] = "<a href="http://www.joe.com">joe</a>";
}

textNodes[i].parentNode.innerHTML = splitUp.join(" ");
}
}
</script>
[/CODE][/QUOTE]

http://www.christianityfortoday.com/scripts/js_error.JPG

Nope, got an error. Isn't there something simple, like string.replace, or something? What I want to do is replace "Pastor Art" with a link to "javascript:[abcdefg]popUpTestimony()", keeping "Pastor Art" in there of course. I just don't want to go in a do it all by hand, because there are a lot of them, but if I have to I will.

[upl-file uuid=e7e119ef-1f80-41a1-baf9-7eab39c5dd79 size=24kB]js_error.JPG[/upl-file]
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — Nope, nothing simple -- because you're talking about converting part of one HTML element (a Text Node) to another HTML element (a Hyperlink). At any rate...

I've adjusted my code to create an array of references to those text nodes containing the target string. This time, I'm also posting a method for accurately converting part of a Text Node to a Hyperlink. This code, however, has a fault -- that is, it only handles converting such target strings as are bounded on both sides by a space character. This may suit your needs or it may not. However, you can certainly attempt to adjust the code should you need a slightly different algorithm.
<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--//
var aryTextNodes = null;
//
function findTextNodesRecursively(childNodes, str) {
var x, len = childNodes.length;
for (x=0; x&lt;len; ++x) {
if (childNodes[x].nodeName != '#text') {
if (childNodes[x].childNodes) {
findTextNodesRecursively(childNodes[x].childNodes, str);
}
} else {
if (0 &lt;= childNodes[x].data.indexOf(' ' + str + ' ')) {
aryTextNodes.push(childNodes[x]);
}
}
}
return;
}
window.onload = function() {
aryTextNodes = new Array();
findTextNodesRecursively(document.body.childNodes, 'joe');
convertTextStringToHyperLink('joe', 'http://www.joe.com');
return true;
}
function convertTextStringToHyperLink(str, href) {
var obj, txt, b, p, x, len = aryTextNodes.length;
for (x=0; x&lt;len; ++x) {
b = 0;
txt = aryTextNodes[x].data;
while (0 &lt;= (p = txt.indexOf(' ' + str + ' ', b))) {
obj = document.createTextNode(txt.substring(b, p+1));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
obj = document.createElement("A");
obj.href = href;
obj.appendChild(document.createTextNode(str));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
b = p + str.length + 1;
}
if (b &lt; txt.length) {
obj = document.createTextNode(txt.substr(b));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
}
aryTextNodes[x].parentNode.removeChild(aryTextNodes[x]);
}
return;
}
//--&gt;
&lt;/script&gt;

By the way... The code posted by the other respondant is written in such a way that it needs to be placed at the end of the BODY section of your document. My code, instead, is written so that it may be placed in the HEAD section of your document.
Copy linkTweet thisAlerts:
@rcracingfan24authorFeb 18.2006 — Sorry, none of these has worked. Maybe it's cuz I am changing "joe" to "Pastor Art" and "www.joe.com" to "javascript:popUpTestimony()".

FORGET ABOUT JOE!

How would it work with:

Original String: "Pastor Art"

New String: "A HREF="javascript:popUpTestimony()">Pastor Art</A>"

Remember, FORGET ABOUT JOE!

?

Thanks.

P.S. If it's too hard, don't spend hours on it, I'll just do it by hand.
Copy linkTweet thisAlerts:
@phpnoviceFeb 18.2006 — Doesn't matter what the text is, it all works fine with my code. Here is the page I am testing with:
[code=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Auto Links</title>
<style type="text/css">
<!--
table {
border: 0 solid #808080;
border-collapse: collapse;
margin: 0;
padding: 0;
}
tr,div {
border: 0 solid #808080;
margin: 0;
padding: 0;
}
td,th {
border: 0 solid #808080;
font-family: 'Trebuchet MS', 'Times New Roman', serif;
font-size: 12pt;
margin: 0;
padding-bottom: 2px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
text-align: center;
vertical-align: top;
}
th {
text-decoration: underline;
vertical-align: bottom;
}
-->
</style>
<script type="text/javascript">
<!--//
var aryTextNodes = null;
//
function findTextNodesRecursively(childNodes, str) {
var x, len = childNodes.length;
for (x=0; x<len; ++x) {
if (childNodes[x].nodeName != '#text') {
if (childNodes[x].childNodes) {
findTextNodesRecursively(childNodes[x].childNodes, str);
}
} else {
if (0 <= childNodes[x].data.indexOf(' ' + str + ' ')) {
aryTextNodes.push(childNodes[x]);
}
}
}
return;
}
window.onload = function() {
aryTextNodes = new Array();
findTextNodesRecursively(document.body.childNodes, 'Pastor Art');
convertTextStringToHyperLink('Pastor Art', 'javascript:popUpTestimony()');
return true;
}
function convertTextStringToHyperLink(str, href) {
var obj, txt, b, p, x, len = aryTextNodes.length;
for (x=0; x<len; ++x) {
b = 0;
txt = aryTextNodes[x].data;
while (0 <= (p = txt.indexOf(' ' + str + ' ', b))) {
obj = document.createTextNode(txt.substring(b, p+1));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
obj = document.createElement("A");
obj.href = href;
obj.appendChild(document.createTextNode(str));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
b = p + str.length + 1;
}
if (b < txt.length) {
obj = document.createTextNode(txt.substr(b));
aryTextNodes[x].parentNode.insertBefore(obj, aryTextNodes[x]);
}
aryTextNodes[x].parentNode.removeChild(aryTextNodes[x]);
}
return;
}
//-->
</script>
</head>

<body>

<p>Now is the time for Pastor Art to <br> come to the aid of his country.</p>

<div>Now is the time for Pastor Art to <br> come to the aid of his country.</div>

<table>
<tr>
<td>Now is the time for Pastor Art to <br> come to the aid of his country.</td>
<td><p>Now is the time for Pastor Art to <br> come to the aid of his country.</p>
</td>
</tr>
<tr>
<td>Now is the time for Pastor Art to <br> come to the aid of his country.</td>
<td><div><p>Now is the time for Pastor Art to <br> come to the aid of his country.</p></div></td>
</tr>
</table>

</body>
</html>
[/code]
×

Success!

Help @rcracingfan24 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...