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

pass img direct path src to input onClick

本文关键字：输入 onClick src img 路径      更新时间：2023-09-26

我有这个片段：

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

IM 试图让它在单击 img 时传递介于"之间的 src，而不是实际的 url

现在单击图像会导致

http:/site.com/image.gif

被放置在输入中

但我需要它只是

image.gif

在输入中

我怎样才能做到这一点？

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

this.getAttribute('src')

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

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

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

例如：

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

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

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

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

方法 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）。

要将其与您的路径匹配，您可以使用 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"
相关文章：