找一個能將特定文字替換成link的javascript

[sea0964]

不知道有沒有這種東西, 可以把網站上的特定文字改成特定的link.
比方說有域名, 或是domain的字樣, 就自動改成link link到domainclub.org

本來我是去改xoops裡面編輯器的設定, 等於是跟bbcode一起執行, 可是會跟現成的bbcode相衝突, 如果在link或圖檔檔名裡面有domain字樣, 也會被替換成link, 造成url跟img等bbcode出問題
想來想去, 可能用javascript可以做成外掛, 等php把網頁產生出來以後, javascript再把顯示出來的文字替換成link, 這樣就不會跟bbcode衝突
今天找了一整天, 還是沒有找到類似的東西, 不知道這邊有人知道

[wmh]

你可以用 regular expressions 找出 domain 的字串，然後以連結語法取代掉，可參考：

http://www.regular-expressions.info/javascriptexample.html

[monkey]

sea0964兄..
您要的是這樣嗎? http://tk.38.com/forum/index.php/topic,85.0.html

[sea0964]

wmh兄給的link我看了, 不過我是要自動取代
monkey兄那個就是我要的效果,
不過這應該是去改bbcode的地方吧, 我試過了,
如果[url]或[img]的bbcode 裡面的link也有這些字樣, 會出包:P
所以才會想說看javascript能不能外掛來處理, 變成輸入時php先處理好bbcode,
顯示出來後java再處理一次文字
不知道這個想法可不可行..

[wmh]

其實 bbcode 也是用 regular expressions 去做的。而不論是用 javascript 或用 php 來處理，單純的文字取代都是很容易出問題的，用 regular expressions 就可以幫你比較準確去判斷，不過仍會有限制。

我還不是很清楚你要的東西，你是要把固定的字串取代成連結嗎？還是把類似 dn 的字串都改成連結？

固定字串取代成連結的話，也是需要給條件的，例如字串前後都是接空白字元時，才轉成連結，否則，如果有其他字串內包著你要轉的字串時，還把那個字串也分解掉，這樣就做錯了。

若是要把類似 dn 的字串都轉成連結的話，很多程式內建的 bbcode 都會有這樣的功能，像 vbb 就會把開頭是 http:// 的字串轉成連結，可直接參閱這些程式原始碼。

[sea0964]

我想要的是像某些廣告商的contextual text link廣告, 這邊有個例子:
http://www.managedlinks.com/resources.php
圖一的有底線的Search Engine Optimization連結事實上不是網站本身就帶的連結, 而是廣告商的link, 當滑鼠移到link上時, 會變成圖二, 網站本身並沒有把那幾個字加link或做效果, 只是加了一段廣告商的程式碼, 就自動會把關鍵字加上link及效果, 我想要的就是這種東西(不用有那個說明, 我只要link).

這樣我就不用考慮跟bbcode相衝突的問題

[wmh]

嗯，瞭解了，以固定的字串取代為另一個字串，大致是這樣吧？我寫了一個簡單的程式如下：
<script>
var keywords = Array(
Array("Google AdSense", "http://ads.google.com/"),
Array("clicking", "http://click.to/"),
Array("advertisers", "http://advertisers.com/")
)

function replaceKeyword(objID) {
var text = "";
if (objID != null) {
text = document.getElementById(objID).outerHTML;
} else {
text = document.body.innerHTML;
}
for (var i = 0; i < keywords.length; i++) {
var re = new RegExp(keywords[i][0].replace(/\s+/, "\\s+"), "g");
var m = re.exec(text);
if (m != null) {
for (var j = 0; j < m.length; j++) {
var reg = new RegExp(m[j], "g");
text = text.replace(reg, "<a href='" + keywords[i][1] + "'>" + m[j] + "</a>");
}
}
}
if (objID != null) {
document.getElementById(objID).outerHTML = text;
} else {
document.body.innerHTML = text;
}
}
</script>


使用時，在 <body> 內加一段語法來執行
<body onload="replaceKeyword('websiteContent')">
帶入的參數可以沒有，或是帶入某個元素的 ID。

程式最上面的地方可以設定關鍵字及要填入的網址，如果關鍵字內有空白，我在搜尋時會用 \s+ 取代，\s+ 表示一個以上的空白、跳行、定位等等...這樣遇到斷行的關鍵字時才能有效判斷，完整的網頁範例，看原始碼可知道效果：

http://65.98.116.226/~wmh/

[sea0964]

多謝wmh兄,
剛剛把它加到我的xoops裡面
我是加到佈景的theme.html檔裡面
上面那一段加到</head>上面
然後把<body>改成第二段
可是似乎不work, 不知道是啥問題?
http://www.deal13.net/
直接檢視原始檔的話可以看到這一段code沒問題, 可是實際去討論區test, 還是不work,
我現在還把code留著沒改,
還有一個問題, 如果是要忽略大小寫, 像是不管Google google GOOGLE都要替換的話要加啥?
還是每一個都要手動加?

[wmh]

<body onload="replaceKeyword('websiteContent')">

你要把 websiteContent 改成你要取代的元素(某個table 或 td 或 div) 的 ID
或者整個 body 都要取代的話，用:

<body onload="replaceKeyword()">

大小寫不拘的話，改：
var re = new RegExp(keywords[i][0].replace(/\s+/, "\\s+"), "g");
new RegExp(m[j], "g");
為：
var re = new RegExp(keywords[i][0].replace(/\s+/, "\\s+"), "i");
new RegExp(m[j], "i");
即可

[wmh]

你試試看能不能起作用，另外我原本的想法是字串前後都要留空白(或換行、小數點等等)才取代為連結，但是忘了加這一段，如果你使用上有問題我再來改，也就是當你有個字串是 [email protected] 時，其中的 Dreamhost 會被取代為連結，這樣就怪怪的了。

[sea0964]

改好了, 還是沒用
<script>那一段我是放在<head>裡, 還是應該放在其他地方?

[sea0964]

順便在問一下, 如果剛好碰到html code裡面剛好有這個字串, 那會發生啥事?

[wmh]

我發現你網頁內有個 clock.js 用到了 window.onload，所以 body 的 onload 就失效了，你可以把 <script>
replaceKeyword();
</script> 放到網頁的最下面，可以解決這個問題。

另外建議這樣改：
var re = new RegExp(keywords[i][0].replace(/\s+/, "\\s+"), "gi");
new RegExp(m[j], "gi");
沒有用 g 的話，網頁內有很多字串不會被取代。

如果遇到 html code 裡面有這個字串，或不想被修改的字串也被修改了，那就要再看看是什麼狀況，再修改 regular expressions 讓搜尋字串更精確即可。

[sea0964]

work了, 可是也出現一個大問題
如果是原本這個字串所在的句子裡本身就帶有link, 那會被取代掉, 原本的link會失效.
舉例來說:
在這個scipt裡設定把google這個字串變成www.google.com的link
剛好我的頁面裡本來就有一個link是 google adsense指到https://www.google.com/adsense/?hl=zh_TW
套用這個script後就會變成google指到www.google.com, adsense就沒有link了, 原本的link就消失了

[wmh]

像這種類似的狀況會很多，需要先給個明確的定義，我先假設若字串後面跟著一個 < 表示已經有連結，就不取代，程式如下：
function replaceKeyword(objID) {
var text = "";
if (objID != null) {
text = document.getElementById(objID).outerHTML;
} else {
text = document.body.innerHTML;
}
for (var i = 0; i < keywords.length; i++) {
var re = new RegExp("(" + keywords[i][0].replace(/\s+/, "\\s+") + ")([^<])", "gi");
var m = re.exec(text);
if (m != null) {
text = text.replace(re, "<a href='" + keywords[i][1] + "'>$1</a>$2");
m = re.exec(text);
}
}
if (objID != null) {
document.getElementById(objID).outerHTML = text;
} else {
document.body.innerHTML = text;
}
}

[oldboy]

高手过招。果然飞沙走石。小弟只能当睁眼瞎了：） 强！

[sea0964]

可不可以變成如果字串後面不管多遠第一個接到的<是</a>就不取代, 這樣會不會比較好?
因為可能字串只會在一個link中間

[wmh]

function replaceKeyword(objID) {
var text = "";
if (objID != null) {
text = document.getElementById(objID).outerHTML;
} else {
text = document.body.innerHTML;
}
for (var i = 0; i < keywords.length; i++) {
var re = new RegExp("(" + keywords[i][0].replace(/\s+/, "\\s+") + ")([^<.]*)(<(/[^A]|[^/]))", "gi");
var m = re.exec(text);
if (m != null) {
text = text.replace(re, "<a href='" + keywords[i][1] + "'>$1</a>$2$3");
m = re.exec(text);
}
}
if (objID != null) {
document.getElementById(objID).outerHTML = text;
} else {
document.body.innerHTML = text;
}
}


這樣可以達到你的要求，不過這樣仍很容易破功，如果字串是像下面這樣包的就沒效了：
<a href=""><b>Keywords</b></a>

如果以這樣的思考方式下去做，可能會常常會碰到例外狀況，常常需要修改，我建議可以改用另一種方式，就是自己把想要轉為連結的字串用 [] 包起來，當遇到關鍵字被 [] 包起來時，比較容易確認是我們要改的地方。

[sea0964]

還是破功了, 只要有人去edit post, 就會破功.
很好奇clicksor的廣告到底是怎麼弄的, 不會是一個條件一個條件列的吧?
它只會替換非連結部份的字串..