Question

请原谅我的无知;我是一个HTML人，JS对我来说很陌生。我正在尝试创建一个基于页面URL显示图像的功能。

例如：“page_001-e.html”会显示“page_001.jpg”

到目前为止，我已经成功地将它们一起屠杀了。

<script type="text/javascript">
  document.write("<img src=\"photos/full/"+location.pathname.substring(location.pathname.lastIndexOf("/") + 1)+".jpg"+"\" />");
</script>

返回：

 <img url="photo_000-e.html.jpg" />

我需要从结果中修剪 -e.html 。我在一个多语言网站工作，所以我不能依赖 -e 作为常量，因为它是语言指标。

从谷歌搜索，看起来我可以使用str.replace或slice，但我不知道如何使用它们，也不知道从哪里开始。

如果我以错误的方式看待，我会感激任何帮助或任何建议。

Answer 1

您可以使用以下代码获取图像的URL，假设始终只有一个破折号：

<script type="text/javascript">
    var img_url = window.location.href.split("-")[0] + ".jpg";
</script>

现在，您需要弄清楚要放置它的位置。我建议创建一个Image对象，然后将其附加到DOM中的特定区域。

<script type="text/javascript">
    // Get the image URL
    var img_url = window.location.href.split("-")[0] + ".jpg";

    // Create an image (not visible anywhere)
    var img = document.createElement("img");

    // Set the Image to load from your new URL
    img.src = image_url;

    // Add it to your HTML
    document.getElementById("some_id").appendChild(img);
</script>

<div id="some_id">
</div>

在上面的代码中，javascript会将图像添加到ID为“some_id”的div中。

Answer 2

您可以使用以下代码修剪值

location.pathname.substring(location.pathname.lastIndexOf("/") + 1).replace(location.pathname.substring(location.pathname.lastIndexOf("/") + 1).lastIndexOf("-"),"")

Answer 3

尝试使用.replace？

var path = location.pathname.replace('.html','.jpg');

document.write(path);

JS：根据页面URL获取图像

3 个答案: