javascript - 在字符串中查找 ID 并从数组中替换

Question

我有一个字符串变量，它可能是这样的:

var content = "blah blah [media:id=1] blah blah blah [media:id=0] blah blah";

还有一组带有图像信息的对象，即

var imageArray = [
  {id:0, path:"/images/image.jpg"},
  {id:1, path:"/images/anotherimage.jpg"}
]

我需要一个函数来通过 id 将“[media:id=x]”替换为来自 imageArray 的相应图像对象路径，以便我的“内容”变量看起来像:

"blah blah <img src='/images/anotherimage.jpg' /> blah blah blah <img src='/images/image.jpg' /> blah blah";

但我不确定从哪里开始？

Answer 1

您可以使用 String#replace用它各自的图像元素替换字符串中的 id。

content.replace(/\[media:id=(\d+)\]/g, function(m, id) {
    var path = imageArray.find(o => o.id === Number(id));
    if (path) {
        return `<img src="${path.path}" />`;
    }
    return m;
});

正则表达式 \[media:id=(\d+)\] 将匹配

1. \[: [ 文字
2. media:id= 文字
3. (\d+): 一个或多个数放入捕获组
4. \]:]字面量

Array#find可用于查找数组中的特定元素。

imageArray.find(o => o.id === Number(id))

将从字符串中获取 id 与匹配的 id 匹配的对象。如果在数组中找到object，则返回img标签，将其替换为else元素，返回完整字符串。

var content = "blah blah [media:id=1] blah blah blah [media:id=0] blah blah";
var imageArray = [{
    id: 0,
    path: "/images/image.jpg"
}, {
    id: 1,
    path: "/images/anotherimage.jpg"
}];

var res = content.replace(/\[media:id=(\d+)\]/g, function(m, id) {
    var path = imageArray.find(o => o.id === Number(id));
    if (path) {
        return `<img src="${path.path}" />`;
    }
    return m;
});

console.log(res);