Javascript 将img直接路径src传递给input onClick

我有一段话：

<script>
  function changeValue(o){
    document.getElementsByName('NAME')[0].value=o;
  }
</script>

<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
<img src='image.gif' onclick="changeValue(this.src)" />

<input type="text" name="NAME" value="SOMETHING">

放在输入框中

但我需要它是公正的

image.gif

在输入中

---

如何实现这一点？

对象的src属性返回图像的完整/计算源。要获得所需的结果，可以使用

getAttribute

方法，该方法返回属性的指定值

this.getAttribute('src')

---

您可以获取子字符串，然后更新该值

function changeValue(o) {
  // its a url, extract it
  if(o.indexOf('http') > -1) {
     o = o.substr(o.lastIndexOf('/') + 1);
  }
  document.getElementsByName('NAME')[0].value = o;
}

---

您可以使用javascript的拆分功能进行拆分；site.com/image.gif

"site.com/image.gif".split(".com/")[1];

---

我已经通过使用alt标记解决了这个问题

<script>
  function changeValue(o){
    document.getElementsByName('NAME')[0].value=o;
  }
</script>

<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">One</span>
<span onclick="changeValue(this.innerHTML)" style="cursor: pointer;">Two</span>
<img src='image.gif' alt='image.gif' onclick="changeValue(this.alt)" />

<input type="text" name="NAME" value="SOMETHING">

函数更改值（o）{
document.getElementsByName（'NAME'）[0].value=o；
}
一个
两个

方法1:

str.split（）

一种方法是使用

/

作为分隔符，将字符串拆分为一个数组。这将字符串拆分为一个数组，其中

/

是数组中逗号的函数等价物。这里有一个例子

var imagePath = 'http:/site.com/image.gif'
var splitted = imagePath.split('/');
// returns ["http:", "site.com", "image.gif"]

// get last str in splitted
var imageFile = splitted[splitted.length - 1];
// returns "image.gif"

方法2：正则表达式 您可以使用获取最后一个

\

后面的所有字符。表达式如下所示：

var regex = /([a-z\.\-\_]+\.[a-z]{2,4})/gi;

此正则表达式匹配任何字符（

a-z

，

，

-

，

），这些字符后跟一个

，然后是2-4个字符（

a-z

）

要将其与路径匹配，可以使用

这比前一个解决方案更详细，但提供了根据需要定制映像路径的选项

分别获取文件名和扩展名

var regex = /([a-z\-\_]+)/gi;
var matches = imagePath.match(regex);
// returns ["http", "site", "com", "image", "gif"]

var fileName = matches[matches.length - 2]; // "image"
var extension = matches[matches.length - 1]; // "gif"

使用前面的

/

获取文件名

var regex = /(\/[a-z\.\-\_]+\.[a-z]{2,4})/gi;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/image.gif"

var imagePath = http:/site.com/some-folder/image.gif;
var regex = /com(\/[a-z\.\-\_\/]+)/i;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/some-folder/image.gif"

按照

.com

获取完整路径

var regex = /(\/[a-z\.\-\_]+\.[a-z]{2,4})/gi;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/image.gif"

var imagePath = http:/site.com/some-folder/image.gif;
var regex = /com(\/[a-z\.\-\_\/]+)/i;
var matches = imagePath.match(regex);

var lastMatch = matches[matches.length - 1]; // "/some-folder/image.gif"

---

为了避免额外的JS和拆分字符串/etc，您可以为图像定义另一个属性并调用该属性。我会避免使用“alt”，这样它就可以在图像未加载时显示某些内容

例如：

---

如果this.data-path不起作用，您可以使用getAttribute（'data-path'）。

在阅读本文之前，我已使用它进行了修复，但我认为您的方式就是我将要使用的方式=）