Функция которая оборачивает в span по координатам с массива обьектов

Question

Знатоки JS, вот пытась решить задачку, в которой есть стринг, и координаты по которым нужно вставить span. В результате должно быть так примерно (может и индексами промахнулся): Дофига текста, а span вот этот фрагмент зеленый span , а вот тут дальше дофига теста, span и еще одно зеленое span Как я делаю, но не получается(

const str = 'Дофига текста, а вот этот фрагмент зеленый, 
а вот тут дальше дофига теста, и еще одно зеленое';
const coordinates = [
  { in: 18, out: 45 },
  { in: 77, out: 94 },
];
const arrFromString = str.split('');
let strWhithSpan = '';
let strNotspan = '';
const resString = coordinates.reduce((acc, cord) => {

  arrFromString.map((str, index) => {
    if (index+1 > cord.in && index+1 < cord.out) {
      strWhithSpan = strWhithSpan + str;
      acc = `<span>${strWhithSpan}</span>`;
    } else {
      strNotspan = strNotspan + str;
      acc = strNotspan;
    }
  });
  return acc;
}, '');

Answer 1

Не мучайтесь выставляйте индексы поверяя предварительно.

Попробуйте так

const str = 'Дофига текста, а вот этот фрагмент зеленый, а вот тут дальше дофига теста, и еще одно зеленое';
const coordinates = [
  { in: 17, out: 41 },
  { in: 75, out: 92 },
];
const arrFromString = str.split('');
const resString = arrFromString.map((strPart, index) => {  
    if (coordinates.map(cord=>cord.in).includes(index)) {
      return `<span>${strPart}`;
    } else if (coordinates.map(cord=>cord.out).includes(index)) {
      return `${strPart}</span>`;
    } else {
      return strPart;
    }  
  
}).join("");


console.log(resString);

сокращенный вариант

const str = 'Дофига текста, а вот этот фрагмент зеленый, а вот тут дальше дофига теста, и еще одно зеленое';
const coordinates = [
  { in: 17, out: 41 },
  { in: 75, out: 92 },
];
const arrFromString = str.split('');
const resString = arrFromString.map((strPart, index) => 
    coordinates.map(cord=>cord.in).includes(index)? `<span>${strPart}`: coordinates.map(cord=>cord.out).includes(index)? `${strPart}</span>`:strPart
).join("");

console.log(resString);

БЛОГ НА HUSL

Функция которая оборачивает в span по координатам с массива обьектов

Ответы (1 шт):