Question

我使用此代码可以通过在框中输入来更改图像上的文本叠加。

<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 =，但每当我清除该框时，它都会停止运行，直到我刷新页面。这使得它无法正常运行，因为重点是清除文本框并重写一些内容。

我需要修复它，以便即使清除了该框也能正常工作，但我无法弄清楚如何。

Answer 1

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

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

Answer 2

你可以试试这个，它有效吗

img.src = img.src.replace（/ name [^＆amp;] + /，'name ='+ this.value）;

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

Javascript用文本框替换图像URL

2 个答案: