У меня есть строковая переменная, которая может быть что-то вроде:

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"}
]

Мне нужна функция для замены «[media: id = x]» на соответствующий путь к объекту изображения из imageArray через id, чтобы моя переменная «content» выглядела следующим образом:

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

Но я не уверен, с чего начать?

4
grasesed 13 Дек 2016 в 09:29

3 ответа

Лучший ответ

Вы можете использовать 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 совпадающий с идентификатором из строки. Если в массиве найден объект, можно вернуть тег img, чтобы заменить его на элемент, иначе можно вернуть полную строку.

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);
2
Tushar 13 Дек 2016 в 06:39

Простое уменьшение массива может помочь вам:

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"}
]

console.log(
  imageArray.reduce((res, obj) => {
    const 
      {id, path} = obj,
          
      re = new RegExp(`\\[media:id=${id}\\]`)
    ;

    return res.replace(re, `<img src="${path}" />`);
  }, content)
);
0
Hitmands 13 Дек 2016 в 06:43

Я бы сделал это так:
Я прохожу массив и проверяю каждый идентификатор, существует ли он в строке, если да, я заменяю эту часть.

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"}
]

imageArray.forEach(function(element, i){
  var searchedStr= "[media:id="+element.id+"]";

  if(content.indexOf(searchedStr)!==-1)
    {
      var replaceStr = "<img src='"+element.path+"' />";
      content = content.replace(searchedStr,replaceStr);
    }
});
console.log(content);
0
Cold_Class 13 Дек 2016 в 06:42