如何创建一个Regex函数，匹配两个键的图像alt文本

Question

我正在尝试匹配图像alt文本中的两个值。这些alt中还有其他可以忽略的文本
属性将是大小或裁剪。

alt标签看起来像：

• alt="尺寸：16作物：中作物">
• alt="；尺寸：16作物：紧密作物">
• alt="；尺寸：16裁剪：全身">
• alt="；尺寸：8个作物：中等作物">
• alt="；尺寸：8作物：紧密作物">
• alt="；尺寸：8裁剪：全身
• alt="；尺寸：0作物：中期作物">
• alt="；大小：0裁剪：关闭裁剪">
• alt="；尺寸：0裁剪：全身

对于尺寸；0"；或"；8〃；或"；16〃；对于作物，我正试图获得"；全身；或"；作物中期"；或"；紧密作物"；

这可能吗？

function getImageProperty(image, property) {
const regex = new RegExp(`${property}: (.+)[]]`, 'g');
const matches = image.altText.match(regex);
return matches && matches[1];
}
/**
* Returns a matching product image for provided size and crop.
*/
const getMatchingImage = (images: size, crop) => {
return images.find(
(image) =>
getImageProperty(image, size) && getImageProperty(image, crop),
);
};

Answer 1

您可以使用此regex，它将匹配属性名称之后的所有内容，直到字符串或下一个属性名称的末尾：

bsize: (.*?)(?=sw+:|$)

size将被替换为任何合适的属性名称。

images = document.querySelectorAll('img')
properties = ['size', 'crop']
function getImageProperty(image, property) {
const regex = new RegExp(`\b${property}: (.*?)(?=\s\w+:|$)`)
const matches = image.getAttribute('alt').match(regex)
return matches && matches[1]
}
[...images].forEach((img, i) =>
properties.forEach(prop => console.log(`image ${i} ${prop} = ${getImageProperty(img,prop)}`))
)

<img alt="size: 16 crop: mid crop" />
<img alt="crop: close crop size: 16" />
<img alt="size: 16 crop: full body" />
<img alt="crop: mid crop size: 8" />
<img alt="size: 8 crop: close crop" />
<img alt="size: 8 crop: full body" />
<img alt="size: 0 crop: mid crop" />
<img alt="size: 0 crop: close crop" />
<img alt="crop: full body size: 0" />

Answer 2

格式"size: 16 crop: mid crop"是非决定性的，因为大小值后面没有分隔符，例如"size: 16, crop: mid crop"。

你可以使用负面展望来解决这个问题：

const regex = new RegExp(`${property}: (\w+( (?!crop:)\w+)?)`);

如果您可以控制alt文本并选择,作为分隔符，则可以将正则表达式更改为：

const regex = new RegExp(`${property}: ([^,"]+)`);

更新：

以下是一个工作示例，它似乎是您的image对象格式：

function getImageProperty(image, property) {
const regex = new RegExp(`${property}: ([^,"]+)`);
const matches = image.altText.match(regex);
return matches && matches[1];
}
[
'size: 16, crop: mid crop',
'size: 16, crop: close crop',
'size: 16, crop: full body',
'size: 8, crop: mid crop',
'size: 8, crop: close crop',
'size: 8, crop: full body',
'size: 0, crop: mid crop',
'size: 0, crop: close crop',
'size: 0, crop: full body'
].forEach(str => {
let image = { altText: str };
console.log(image.altText
+ 'n=> size: ' + getImageProperty(image, 'size')
+ 'n=> crop: ' + getImageProperty(image, 'crop')
);
});

Answer 3

使用regex的替代方法是使用split()并从altText字符串中获取比较值。

altText.split(':')[1].split(' ')[1].trim()将返回大小

altText.split(':')[2].split(' ').join(' ').trim()将返回裁剪值

在snippit中，我将一个图像对象、一个目标大小和一个裁剪的属性传递到getMatchingItem方法中。这将提取大小和裁剪值，并返回匹配的图像数组。在本例中，我匹配裁剪的值和大小，以查找具有相同值的对象并将其显示在页面上。

如果这不是你想要的，请告诉我。

function getMatchingImage(list, size, property) {
// set the output to null or some string initially
let output = [];
// iterate over the image elements
list.forEach((img, index) => {
// get the alt attribubtes string
const alt = img.altText
// use split for each targeted value size and crop at the colon
// then take the second indexed string and split again 
// at the second spaces index and trim any white space JIC
let altSize = alt.split(':')[1].split(' ')[1].trim()
// repeat split and get the third indexed string and again split using spaces 
// join the resulting remaining indexed strings and trim them
let altCrop = alt.split(':')[2].split(' ').join(' ').trim()
// conditional to check the image elements size and crop
// matches the passed values size and property
// if there is a match we push the value into an output array
altSize === size && altCrop === property ? output.push(list[index]) : null
})
console.log(output)
// return an array of values
return output
}
// a method to display any matching images found
const displayFoundImage = (imgObjSrc) => {
// iterate over list of found images
imgObjSrc.map(imgObj => {
// search through database images 
return databaseImages.map(img => {
// is there a match?
if (img.src === imgObj.src) {
// create an image element
let imageEl = document.createElement('img')
// set image elements src and alt attribute values
imageEl.src = imgObj.src
imageEl.alt = img.altText
// append body and add image
document.body.appendChild(imageEl)
console.log(imageEl)
}
})
})
}
const databaseImages = [{
src: "https://picsum.photos/100/100",
altText: "size: 16 crop: mid crop"
},
{
src: "https://picsum.photos/101/100",
altText: "size: 16 crop: close crop"
},
{
src: "https://picsum.photos/102/100",
altText: "size: 16 crop: full body"
},
{
src: "https://picsum.photos/103/100",
altText: "size: 8 crop: mid crop"
},
{
src: "https://picsum.photos/104/100",
altText: "size: 8 crop: close crop"
},
{
src: "https://picsum.photos/105/100",
altText: "size: 8 crop: full body"
},
{
src: "https://picsum.photos/106/100",
altText: "size: 8 crop: mid crop"
},
{
src: "https://picsum.photos/107/100",
altText: "size: 8 crop: close crop"
},
{
src: "https://picsum.photos/108/100",
altText: "size: 8 crop: full body"
},
{
src: "https://picsum.photos/109/100",
altText: "size: 0 crop: mid crop"
},
{
src: "https://picsum.photos/110/100",
altText: "size: 0 crop: close crop"
},
{
src: "https://picsum.photos/111/100",
altText: "size: 0 crop: full body"
}
]
const foundImage = getMatchingImage(databaseImages, '8', 'full body')
displayFoundImage(foundImage)