Javascript 是否可以根据用户文本输入更新url链接？

例如，我知道可以在Javascript中执行一些操作，允许用户根据用户文本输入更新文本：

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

函数changeText2（）{
var userInput=document.getElementById（'userInput'）.value；
document.getElementById（'boldStuff2'）。innerHTML=userInput；
}
欢迎来到网站dude

查看上面的代码：tizag.com/javascriptT/javascript-innerHTML.php

但是，我不想使用上面的代码，而是想知道是否可以对url链接执行类似的操作。下面我列出了一个我希望在用户输入文本时发生的逐步示例：

原始链接：

文本字段中的用户输入： espn

用户单击按钮以提交文本字段中的文本

最后一个环节：

谢谢你的帮助……顺便说一句……如果你不知道我是个新手，请详细说明。

1：你需要一些表格
#2：您需要捕获表单提交的时间
#3：根据表单的提交更改url

这里有一个演示：
代码如下：

HTML:

---

我建议使用跨浏览器库，比如jQuery，而不是纯JavaScript。使用jQuery，您可以为按钮添加一个单击处理程序，获取输入值，构建URL，并设置window.location以转到新的URL

HTML

你可以试试这个

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "http://www.google.com?q=" + userInput;
    lnk.innerHTML = lnk.href;
}
</script>
Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>

函数changeText2（）{
var userInput=document.getElementById（'userInput'）.value；
var lnk=document.getElementById（'lnk'）；
lnk.href=”http://www.google.com?q=“+用户输入；
lnk.innerHTML=lnk.href；
}
这里有一个链接：

---

这里有一个简单的JS，它会随着您的键入而更新：

<a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
<input id="searchterm"/>

<script type="text/javascript">
    var link= document.getElementById('reflectedlink');
    var input= document.getElementById('searchterm');
    input.onchange=input.onkeyup= function() {
        link.search= '?q='+encodeURIComponent(input.value);
        link.firstChild.data= link.href;
    };
</script>

var link=document.getElementById（'reflectedlink'）；
var input=document.getElementById（'searchterm'）；
input.onchange=input.onkeyup=function（）{
link.search='？q='+encodeURIComponent（input.value）；
link.firstChild.data=link.href；
};

注:

• 没有内联事件处理程序属性（最好避免它们）

• 分配keyup和change，在键盘更新发生时尝试获取它们，并确保最终捕获所有其他更新

• 使用

  encodeURIComponent（）

  ，以防搜索词中有任何非ASCII或URL特殊字符

• 设置Location（link）对象的

  search

  属性，以避免再次写出整个URL

---

• 设置链接内文本节点的

  数据

  ，以反映完整的URL不要从用户输入中设置

  innerHTML

  ，因为它可能具有HTML特殊字符，如

  &

  和

  ，这是我在几秒钟内找到的解决方案：
  
  <input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
  <a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>
  
  
  
  不需要复杂的javascript，不需要额外的引号或函数。只需根据您的需要编辑ID标签，它就能完美工作。
  我认为这可能很有用：
  
  
  .btn{
  边界：无；
  大纲：0；
  显示：内联块；
  填充：10px 25px；
  颜色：黑色；
  背景色：#ddd；
  文本对齐：居中；
  光标：指针；
  }
  .btn:悬停{
  背景色：#555；
  颜色：白色；
  }
  .textinput{
  线高：2.5em；
  }
  
  请输入您的YouTube视频ID：
  
  
  
  
  
  
  
  
  
  
  
  
  生成字幕»；
  
  
  
  
  函数changeText2（）
  {
  var input=document.getElementById（'userInput'）.value；//获取用户输入的值
  //通过连接字符串“www.google.com/search？q=”和输入（用户输入）来更改标记的href
  document.getElementById（“link”）.href=“www.google.com/search？q=“+input；
  //将文本从“www.google.com/search？q=”更改为“www.google.com/search？q=”+用户输入
  document.getElementById（“link”）.innerHTML=“www.google.com/search？q=“+input；
  }
  
  单击该按钮调用函数changeText2。它执行任务。
  在这一点上，我必须同意@Neal的观点，这个问题甚至没有标记为jQuery。@Craig--也尝试使用form.submit not input.click。。。否则表单将被提交。使用jQuery有很好的理由。随着应用程序的增长，他无疑将需要编写一些跨浏览器执行不同的代码。从jQuery开始（如果jQuery对您来说太大了，那么就从Zepto开始），您不会在jQuery代码中混入大量本地DOM操作代码。没有理由像您的示例中那样创建表单。您刚刚创建了过多的标记。我认为jQuery在这里不是一个糟糕的解决方案。对于新手来说，它很容易使用，就像这个家伙一样，而且它是跨浏览器兼容的。基本上可以替代任何现代dom操作库，并执行类似的操作。我认为没有必要提交该值，除非他们想要存储该数据。因此，我并不认为这里需要表单或提交按钮。一个简单的按钮和一些脚本应该可以完成任务/oh-ho-ho，他用输入进行评分。onchange=input。onkeyup@bobince-对你来说是一个很好的1-up ^ u^。我没有在我的答案中添加onkeyup，但这是一个很好的补充：-DYou rock man+1，这正是我想要做的。我试图做同样的事情，不仅仅是谷歌，而是对其他类似OpenSearch格式的URL进行自定义搜索。我检查了我的反射链接URL，然后更新了链接。search=比？=。我试图在一个网站上模仿Google Chrome浏览器中“搜索引擎”的行为。谢谢@bobince感谢这个例子！如何使代码不注入
  ？
  ？例如，我只想将
  /10
  添加到URL的末尾，而不是从“3.用户单击按钮提交文本字段中的文本”开始添加到
  ？/10
  $(function () {
      $('#submit').click(function() {
          var url = "http://www.google.com/search?q=";
          url += $('#q').val();
          window.location = url;
      });
  });
  
  <script type="text/javascript">
  function changeText2(){
      var userInput = document.getElementById('userInput').value;
      var lnk = document.getElementById('lnk');
      lnk.href = "http://www.google.com?q=" + userInput;
      lnk.innerHTML = lnk.href;
  }
  </script>
  Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
  <input type='text' id='userInput' value='Enter Search String Here' />
  <input type='button' onclick='changeText2()' value='Change Link'/>
  
  <a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
  <input id="searchterm"/>
  
  <script type="text/javascript">
      var link= document.getElementById('reflectedlink');
      var input= document.getElementById('searchterm');
      input.onchange=input.onkeyup= function() {
          link.search= '?q='+encodeURIComponent(input.value);
          link.firstChild.data= link.href;
      };
  </script>
  
  <input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
  <a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>
  
  <a href="www.google.com/search?q=" id="link">www.google.com/search?q=</a><br>
  <input type="text" id="userInput" value="Enter your text here"><br>
  <input type="button" onclick="changeText2()" value="change text">
  <script>
  function changeText2()
  {
      var input=document.getElementById('userInput').value;//gets the value entered by user
      
      //changing the href of tag <a> by concatenatinng string "www.google.com/search?q=" and input (user input)
      document.getElementById("link").href = "www.google.com/search?q="+input;
      
      //changing the text from "www.google.com/search?q="  to "www.google.com/search?q=" + user input
      document.getElementById("link").innerHTML = "www.google.com/search?q="+input;
  }