Javascript 用文本框替换图片 url答案

【问题标题】：Javascript replace image url with text boxJavascript 用文本框替换图片 url
【发布时间】：2014-03-07 08:45:02
【问题描述】：

我使用此代码能够通过在框中键入来更改图像上的文本覆盖。

<input type="text" id="inp"><br>
<img id="image" src="image.php?name=swag">
<script type="text/javascript">
window.onload = function()
{
    document.getElementById( 'inp' ).onkeyup = keyUp;
}

function keyUp()
{
    var img = document.getElementById( 'image' );
    img.src = img.src.replace( /name=[^&]+/ , 'name='+ this.value );
}
</script>

它适用于更改 image.php 的 ?name=，但是每当我清除该框时，它就会停止运行，直到我刷新页面。这使它不起作用，因为关键是清除文本框并重写一些东西。

我需要修复它，以便即使在清除框后它也能正常工作，但我不知道如何。

【问题讨论】：

标签： javascript php image forms src

【解决方案1】：

正则表达式是这里的问题。将+ 替换为* 以进行快速修复。但你可能应该只做img.src = 'image.php?name=' + this.value;

加号查找至少 1 个字符。因此，当您将其空白时，img.src 以 name= 结尾并且不再有 [^&]+ 可以替换

【讨论】：

【解决方案2】：

你可以试试这个，它有效

img.src = img.src.replace( /name[^&]+/ , 'name='+ this.value );

搜索文本以 name 开头并替换为 name= ，因此当您清除文本框时，常规 exp 将找到匹配的文本并替换为新值

【讨论】：