如何在JavaScript中更改图像的路径名

How can I change the pathname of a image in JavaScript?

本文关键字:图像 路径名 JavaScript      更新时间:2023-09-26

searchURL: function() {
    function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }
    var link, url, parser, newPathName = '',
        emailUrl = /'/img'//,
        newstr = '',
        doc = document,
        container,
        container_id,
        container_links,
        container_images,
        documentTableWrapper,
        docBodyFirstChild,
        nodeToTargetToInsertLP;
    if (!doc.getElementById('container')) {
        container = doc.createElement('div');
        container.setAttribute('id', 'container');
        container.className = 'container-avon-representative-news';
        container_links = container.getElementsByTagName('a');
        container_id = doc.getElementById('container');
        docBodyFirstChild = doc.body.firstChild;
        nodeToTargetToInsertLP = doc.getElementsByClassName('flexTile')[4];
        if (nodeToTargetToInsertLP) {
            documentTableWrapper = doc.getElementsByClassName('marginfix')[0];
            container.appendChild(documentTableWrapper);
            insertAfter(container, nodeToTargetToInsertLP);
        } else {
            documentTableWrapper = doc.getElementsByTagName('table')[0];
            container.appendChild(documentTableWrapper);
            doc.body.insertBefore(container, docBodyFirstChild);
        }
    } else {
        container_links = doc.getElementById('container').getElementsByTagName('a');
    }
    container_images = container.getElementsByTagName('img');
    for (var i = 0; i < container_images.length; i++) {
       if (arguments[0] == "smo" || arguments[1] == "smodev") { 
          container_images[i].src = container_images[i].src.replace(emailUrl, '/images/dir_a/');
      } else {
          container_images[i].src = container_images[i].src.replace(emailUrl, '/static/images/dir_b/');
      }
    }
    for (var i = 0, len = arguments.length; i < len; i++) { 
        url = getURL(arguments[i]); 
        for (var j = 0, jlen = container_links.length; j < jlen; j++) { 
            link = container_links[j];
            if (link.href.indexOf(url) !== -1) { 
                parser = document.createElement('a'); 
                parser.href = link.href;
                link.setAttribute('target', '_self');
                newPathName = parser.pathname;
                if (newPathName.search(/Executive|District|Division|National/) != -1) { 
                    newPathName = newPathName.split('/').pop();
                    newstr = newPathName;
                } else {
                    newstr = newPathName;
                }
                link.href = newstr;
            } else {
                link.setAttribute('target', '_blank');
            }
        }
    }
},

我有一个循环,它正在遍历div的子图像:

var container_images = container.getElementsByTagName('img'),
            emailUrl = /'/img'//;
  for (var i = 0; i < container_images.length; i++) {
      if (arguments[0] == "smo" || arguments[1] == "smodev") { 
          container_images[i].src = container_images[i].src.replace(emailUrl, '/images/dir_a/');
      } else {
          container_images[i].src = container_images[i].src.replace(emailUrl, '/static/images/dir_b/');
      }
  }

奇怪的是,这在一个实例(服务器的另一个区域(中起作用,但在另一个实例中,它添加了其他路径名/目录,我甚至没有指出?!

我认为replace足够明确:

xxx.src.replace(emailUrl, '/images/dir_a/'); 

如果此image标记的源属性设置为/'/img'//,则将其替换为/images/dir_a/

有人知道一个更明确的方法,不会添加我没有分配的目录吗?

有人能解释一下replace方法是如何发生这种情况的吗?

更新为了提供一些背景,我没有任何问题的环境如下:我的公司使用CMS来提供这些页面。文件扩展名称为.page;我从来没有听说过CMS之外的扩展,所以我认为它是CMS专有的。

无论如何,在CMS中,您也可以像从任何其他服务器上一样服务器html文件。但是在这个例子中,当我在dev工具中检查源代码时,它似乎添加了<img src="http://xxx.xxx.com/REPSuite/static/html/inews_archives/static/images/dir_b/xxx.png">而不是<img src="http://xxx.xxx.com/REPSuite/static/images/dir_b/xxx.png">

问题是您正在使用.src,并且希望使用.getAttribute('src').setAttribute('src', 'your new src')

HTMLImageElement.src

是反映src HTML的DOMString属性,包含图像的完整URL,包括基本URI。

所以当你调用.src时,它会给你完整的绝对电流uri。您只想获取/设置src属性。工作示例jsbin

答案很简单(当然是事后(。不管怎样,因为我在提供页面的另一个环境中只得到了的时髦路径,所以我只是做了一个条件,检查这个时髦路径。

因此,我没有检查一个正则表达式,而是检查了两个正则表达式。

var emailUrl = /img'//gi,
    tsUrl = /'/REPSuite'/static'/html'/inews_archives'/img'//gi;

for (var i = 0; i < avon_rep_container_images.length; i++) {
     if (arguments[0] == "smo" || arguments[1] == "smodev") { // Checks what environment the page will be used in so we can change the src attribute of all the images in the document to the appropriate path
         avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(emailUrl, '/images/avon_manager_news/');
    } else if(!nodeToTargetToInsertLP) {
         avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(tsUrl, '/REPSuite/static/images/rep_news/');
    } else {
        avon_rep_container_images[i].src = avon_rep_container_images[i].src.replace(emailUrl, '/static/images/rep_news/');
    }
}

感谢所有帮助我的人,我很感激!