Question

我有这种网址

<a href="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4.jpg"><img class="alignnone size-medium wp-image-5906" style="outline: 1px solid blue;" src="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4-300x225.jpg" alt="" width="300" height="225" /></a>

我想替换＆＃34; img20170926_055740_d_solid_ring_stainless_steel_1-4.jpg＆＃34;具有其他名称的图像的名称。

到目前为止我尝试了什么。

var url_img = '<a href="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4.jpg"><img class="alignnone size-medium wp-image-5906" style="outline: 1px solid blue;" src="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4-300x225.jpg" alt="" width="300" height="225" /></a>';
url_img.replace(/^img/, 'other url');

Answer 1

首先，您有两个不同的 img***.jpg 网址

一个用于大图片 <a> href属性
内置缩略图 <img> src属性

img20170926_01_foo_1-4.jpg // a href
img20170926_01_foo_1-4-300x225.jpg // img src

全部包含在 HTML字符串中（而非url_img，就像您为变量命名一样）。

解决方案

如果您真的无法单独获取这些两个网址 - 这是您可以做的最好的选择：

使用 DOMParser 将字符串转换为实际的元素
提取href元素的<a> 属性值
从src元素

<img>

属性值

可以通过比较两个字符串来提取缩略图后缀“330x225”

var HTMLString = '<a href="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4.jpg"><img class="alignnone size-medium wp-image-5906" style="outline: 1px solid blue;" src="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4-300x225.jpg" alt="" width="300" height="225" /></a>';

// HTML string parsing
var domParser = new DOMParser();
var doc = domParser.parseFromString(HTMLString, "text/html");

// Let's do some extraction
var img_large = doc.getElementsByTagName("a")[0].getAttribute("href");
var img_thumb = doc.getElementsByTagName("img")[0].getAttribute("src");
var img_extension = img_large.split(".").pop();
var img_thumbnail_suffix = img_thumb.substr(img_large.replace("."+ img_extension, "").length).replace("."+ img_extension, "");
var img_name = img_large.split("/").pop();
var img_name_no_extension = img_name.replace(/\.[^/.]+$/, "");
var img_is_expected_format = /^img\d{8}_/.test(img_name);

console.log(
"Image Large URL: "+ img_large,
"\nimage Thumbnail URL: "+ img_thumb,
"\nImage extension is: "+ img_extension,
"\nThumbnail suffix is: "+ img_thumbnail_suffix,
"\nImage name is: "+ img_name,
"\nImage name (witnout extension) is: "+ img_name_no_extension,
"\nIs expected format of 'imgYYYYMMDD_'?: "+ img_is_expected_format
);

提取图片纯名称及其扩展名后，您最终可以HTMLString.replace()获得手术精确度：

var HTMLString = '<a href="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4.jpg"><img class="alignnone size-medium wp-image-5906" style="outline: 1px solid blue;" src="http://alatpancing.tk/wp-content/uploads/2017/10/img20170926_055740_d_solid_ring_stainless_steel_1-4-300x225.jpg" alt="" width="300" height="225" /></a>';

// I Hardcoded the values - OFC, see previous example above how to get those values.
var img_name_no_extension = "img20170926_055740_d_solid_ring_stainless_steel_1-4"; 
var img_extension = "jpg";   

// Let's do some replacements now!
var img_new = "img20180131_000001_foo_bar_1-1"; // The new image name
var reg1 = new RegExp(img_name_no_extension, "g");
var HTMLReplaced = HTMLString.replace(reg1, img_new);

// The same way replace the extension if needed...

console.log(HTMLReplaced);

如何替换以img开头并以jpg结尾的图像名称

1 个答案:

解决方案