javascript - 提交时修改 userInput

Question

我需要有关此 javascript 的帮助，如果用户在该字段中输入任何内容，该字段将打印该值，但我想修改该值的特定部分。用户将提交具有我需要修改的特定字符串的图像 url。

例如用户输入类似： http: //www.domain.com/photos/1.jpg

结果应该是： http: //www.domain.com/photos-d/1.jpg

这是代码：

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('result').innerHTML = userInput;
}
</script>

<input type='text' id='userInput' onblur="if(this.value.length == 0) this.value='Enter Image URL';" onclick="if(this.value == 'Enter Image URL') this.value='';"/>
<input type='button' onclick='changeText2()' value='Generate'/>

<p>Output: <a id='result'></a> </p>

您的帮助将不胜感激 - 谢谢，

Answer 1

<script>
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    document.getElementById('result').innerHTML = userInput.replace("/photos/", "/photos-d/");
}
</script>

<input type='text' id='userInput' placeholder="Enter Image URL"/>
<input type='button' onclick='changeText2()' value='Generate'/>

<p>Output: <a id='result'></a> </p>

PS：您可以使用占位符（支持 html5）代替 onblur 和 onclick 事件。

Answer 2

所以基本上你想根据其中某个字符串的出现来修改一个字符串，即.jpg。

所以首先，看看你的 userInput 是否需要修改。

所以这样做

  <script type="text/javascript">
    function changeText2(){
        var userInput = document.getElementById('userInput').value;
         if(userInput.indexOf('.jpg') !== -1){

           userInput = userInput.replace('photos','photos-d');
         }
        document.getElementById('result').innerHTML = userInput;
    }
    </script>

所以基本上你需要有效的字符串替换算法和正则表达式来检测关键字

Answer 3

您可以在输入之前将http://www.domain.com/photos-d/作为标签，而不是要求用户键入此部分。如果他只需要输入图像文件名，则无需更改输入字段。