用户输入HTML标记输出

Question

好的我正在尝试的例子。

用户输入：http://google.com

我希望输出为：

＆＃13;

＆＃13;

<script>
$(document).ready(function() {
  // Handler for .ready() called.

  $("#change-it").click(function() {
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
    $('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>');
    $('#user-link').attr('href', 'http://' + userLink);
  });

});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button> 
<br>
<div id="users-text"></div>
<br>
<a id="user-link" href="#" target="_blank">
  <img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" />
</a>

＆＃13;

＆＃13;

＆＃13;

我如何使用Javascript执行此操作？

问候。

Answer 1

您希望将用户输入设置为链接上的href，如下所示？

＆＃13;

＆＃13;

$(document).ready(function() {
  // Handler for .ready() called.

  $("#change-it").click(function() {
    var userLink = $('#usr-input').val().replace(/.*?:\/\//g, "");
    $('#users-text').text('<a href="' + userLink + '" ><img src="rainbow.gif"></a>');
    $('#user-link').attr('href', 'http://' + userLink);
  });


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="form-control" id="usr-input">
<br>
<button id="change-it" type="button">Update Text</button> 
<br>
<div id="users-text"></div>
<br>
<a id="user-link" href="#" target="_blank">
  <img src="http://orig09.deviantart.net/8364/f/2014/053/f/9/free_space_galaxy_texture_by_lyshastra-d77gofi.png" />
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先获取元素，即它的ID： var element = document.getElementById（＆＃34; element id＆＃34;）

然后更改href属性： element.href =＆＃34;你的字符串＆＃34;