JavaScript客戶端（用戶輸入）查找和替換超鏈接

我希望客戶端用戶能夠在文本輸入框中插入文本，單擊「替換」並相應地替換超鏈接列表。錨文本將保持不變，但超鏈接將改變。JavaScript客戶端（用戶輸入）查找和替換超鏈接

我的問題：我只獲取第一個要更改的超鏈接。我有一個小提琴設置了兩個鏈接，你只能看到第一個變化。我想要一個例如20個鏈接的列表一次性更改。

jsfiddle.net/TKxuf/

HTML：

<input id="replace" type="text" value="newphrase" /> 
<input onclick="doReplace()" type="button" value="Replace!" /> 

<br/> 
<p id="list"><a href="google.com/q=keyword">Google Keyword Search</a></p> 
<p id="list"><a href="yahoo.com/q=keyword">Yahoo Keyword Search</a></p>

的JavaScript：

function doReplace() { 
    var s = "keyword"; 
    var r = document.getElementById('replace').value; 

    var oldtext = document.getElementById('list').innerHTML; 
    var newtext = oldtext.replace(s, r); 

    console.log(s); 
    console.log(r); 
    console.log(document.getElementById('list')); 
    document.getElementById('list').innerHTML = newtext; 
}

來源

2013-08-03 user2648710

讓我補充：我的用戶能夠重複的查找和替換，因爲他們希望，而無需重新加載頁面。 – user2648710

我不能工作了爲什麼你要在HTML頁面中的原始字符串代碼開始，所以我建議你可能對你的方法有問題。還要注意，在HTML中有多個具有相同ID的元素是非法的，這主要解釋了爲什麼getElementById只返回一個項目。外部URL也必須以http：//開頭。

我通常使用jQuery這些天 - 在jQuery中，您可以簡單地將id =「list」交換到class =「list」並使用$（'。list'）來獲取它們全部的列表。 $（'。list'）。each（function（）{var item = this;/*操作碼在這裏* /}）;可以讓你改變它們，但你可能需要做一些閱讀。

無論如何，我仍然認爲你的方法是錯誤的。

我會做的是有一個正常的Url的JavaScript數組，具有很難作爲URL的一部分混淆的替換鍵。

var addresses = [ 
    { text: "Google Keyword Search", url: "http://google.com?q=%keyword%" }, 
    { text: "Yahoo Keyword Search", url: "http://yahoo.com?q=%keyword%" } 
];

當用戶搜索，你再建立新的HTML代碼轉換成字符串通過數組迭代：

var output = ''; 
for (var i = 0; i<addresses.length; i++) { 
    var item = addresses[i]; 
    output += '<p><a href="'+escape(item.url.replace('%keyword%', r))+'">'+item.text+'</a></p>'; 
}

注：我沒有檢查這個代碼，但你應該能夠得到這個想法。您實際上通過在列表容器上使用innerHTML寫出所有整個列表。

希望這可以幫助。

最好的問候，馬克Rabjohn
Integrated Arts Limited

來源

2013-08-04 15:34:22

JavaScript客戶端（用戶輸入）查找和替換超鏈接

回答

相關問題