Question

例如，我的WordPress安装中有这个图像路径：

baseurl.com/images/02D371FEEA23-150x320px.png

我想将150x320px值更改为以下内容：

baseurl.com/images/02D371FEEA23-800x600px.png

注意：150x320px可以是动态的！

如何尽可能地改变那部分，同时保持其他部分不受伤害？

Answer 1

假设URL结构始终相同，请使用正则表达式/-\d+x\d+px\./替换所需的字符串。

function replaceText() {
  var value = document.getElementById('inp').value;
  alert(
    value.replace(/-\d+x\d+px\./, '-800x600px.')
  );
  }

replaceText();

<input type="text" value="baseurl.com/images/02D371FEEA23-150x320px.png" onChange="replaceText()" id="inp"/>

Answer 2

<script>

var str = 'DSCN0551-130x130.jpg';
alert(str);
var matches = str.replace(/(\d+)x(\d+)\.(\w+)$/,"800px X 750px");
alert(matches);

</script>

Answer 3

您可以使用Regex并完成它。

以下是一个例子。

var string =  "baseurl.com/images/02D371FEEA23-150x320px.png";

var changedString = string.replace(/(-)\d+x\d+/g,"$1800x600");

console.log(changedString);

解释正则表达式：的（ - ）\ d + X \ d +

（ - ）：从连字符开始，( )将捕获字符串的这一部分，以便以后在替换时使用。

\ d + x \ d + ：\d数字+任意数字后跟x后跟数字\d任意数字{ {1}}。

在替换期间，我确保保留捕获的连字符。捕获的字符串存储在+。
中

Answer 4

不确定“最佳做法”，但这适用于几乎所有网址，包括带破折号的网址：

function replaceImgUrl(original,newWidth,newHeight){
    //These 2 lines allow other parts of the url to have a dash
    //Divide url
    var oldDimensions = original.split("/");
    //Get last part
    oldDimensions = oldDimensions[oldDimensions.length-1];
    //Get old dimensions
    oldDimensions = oldDimensions.split("-")[1];
    oldDimensions = oldDimensions.split("px")[0];
    oldDimensions = oldDimensions.split("x");
    //oldDimensions has been figured out!
    var ret = "";
    for(var i = 0; i < original.split("/").length-1; i++)
        {
            ret += original.split("/")[i];
            ret += "/";
        }
    return ret+original.split("/")[original.split("/").length-1].replace(oldDimensions[0],newWidth).replace(oldDimensions[1],newHeight);
}

console.log(replaceImgUrl("baseurl.com/images/02D371FEEA23-150x320px.png",546,23789));

更改图像路径的特定部分

4 个答案: