Question

我希望客户端用户能够在文本输入框中插入文本，单击“替换”并相应地替换超链接列表。锚文本将保持不变，但超链接将更改。

我的问题：我只获得要更改的第一个超链接。我有一个小提琴设置有两个链接，你只能看到第一个变化。我想要一个列表，例如，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;
}

Answer 1

我无法理解为什么你想要HTML页面代码中的原始字符串开头，所以我建议你的方法可能有问题。另请注意，在HTML中使多个元素具有相同的Id是非法的，这主要解释了为什么getElementById只返回一个项目。外部网址也必须以http：//开头。

我现在经常使用jQuery - 在jQuery中你可以简单地将id =“list”交换到class =“list”并使用$（'。list'）来获取它们的列表。 $（'。list'）。each（function（）{var item = this; / *这里的操作代码* /}）;会允许你改变它们，但你可能需要做一些阅读。

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

我要做的是拥有一个正常的Urls 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来写出所有整个列表。

希望这会有所帮助。

最诚挚的问候， Mark Rabjohn Integrated Arts Limited

JavaScript客户端（用户输入）查找和替换超链接

1 个答案: