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

---

我无法理解为什么您希望HTML页面代码中的原始字符串以开头，因此我建议您的方法可能有问题。还请注意，在HTML中，具有多个相同Id的元素是非法的，这主要解释了为什么getElementById只返回一个项。此外，外部URL前面也必须加上http://前缀

现在我通常使用jQuery——在jQuery中，您可以简单地将id=“list”交换为class=“list”，然后使用$（'.list'）来获得所有这些内容的列表$（'.list'）.each（function（）{var item=this；/*这里的操作代码*/}）；这将允许您更改所有内容，但您可能需要进行一些阅读

无论如何，我仍然认为你的方法是错误的

我要做的是有一个普通的javascript url数组，带有可重放的键，这些键作为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>';
}

var输出=”；
对于（var i=0；i
”；
}

注意：我还没有检查这段代码，但您应该能够理解。实际上，您可以在列表容器上使用innerHTML写出整个列表

希望这有帮助

致以最良好的祝愿， 马克·拉布约翰

---

让我添加：我希望用户能够按照自己的意愿重复查找和替换，而无需重新加载页面。

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>';
}