将img直接路径src传递给输入onClick

Question

我有这个片段：

<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">

我试图这样做，当点击img时，它传递的是“”而不是实际网址之间的src

现在点击图片会产生

http:/site.com/image.gif

被置于输入

但我需要它只是

image.gif

输入中的

我怎么能做到这一点？

Answer 1

HTMLImageElement对象的

span属性返回图像的完整/计算源。为了获得所需的结果，您可以使用src方法返回属性的指定值。

getAttribute

Answer 2

你可以使用javascript的split函数进行拆分; site.com/image.gif

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

Answer 3

为了避免额外的JS和拆分字符串/ etc，您可以为图像定义另一个属性并调用该属性。我避免使用＆＃34; alt＆＃34;因此，当图像无法加载时，它可以用于显示某些内容。

例如：

如果此.data-path不起作用，您可以使用getAttribute（＆＃39; data-path＆＃39;）。

Answer 4

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

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;
}

Answer 5

我已经通过使用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">

Answer 6

方法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：正则表达式

您可以使用regular expressions获取最终\后面的所有字符。表达式如下所示：

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

此正则表达式匹配任何字符（a-z，.，-，_），后跟.，然后是2 - 4个字符（a-z）。

要将此与您的路径相匹配，您可以使用String.prototype.match()

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

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

这比前一种解决方案更详细，但可以选择定制图像路径以满足您的需求。

单独获取文件名和扩展程序

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"

在.com

后获取完整路径

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"