Разделение текста на основе его значения смещения и вставка его в новый объект

Я хотел разбить paragraph на основе этого entityRanges.

Таким образом, фактический абзац выглядит так:

{
    type: 'paragraph',
    depth: 1,
    text: 'Do you have questions or comments and do you wish to contact ABC? Please visit our customer support page.',
    entityRanges: [{
        type: 'LINK',
        offset: 83,
        length: 16,
        data: {
            target: '_self',
            url: '/index.htm'
        }
    }]
}

Но мои ожидаемые результаты должны быть такими, как показано ниже,

{
    type: 'paragraph',
    depth: 1,
    text: 'Do you have questions or comments and do you wish to contact ABC? Please visit our customer support page.',
    entityRanges: [{
        type: 'LINK',
        offset: 83,
        length: 16,
        data: {
            target: '_self',
            url: '/index.htm'
        }
    }],
    embbeded: [{
        type: 'text',
        text: 'Do you have questions or comments and do you wish to contact ABC? Please visit our '
    }, {
        type: 'link',
        text: 'customer support',
        data: {
            target: '_self',
            url: '/index.htm'
        }
    }, {
        type: 'text',
        text: 'page.'
    }]
}

Я хотел разбить text на несколько частей на основе его значений offset и length.

В примере customer support — это значение смещения.

Таким образом, он должен разбиваться в следующем порядке

  1. У вас есть вопросы или комментарии, и вы хотите связаться с ABC? Пожалуйста, посетите наш
  2. Служба поддержки
  3. страница.

Все вышеперечисленные части необходимо переместить в новый объект embbeded.

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
43
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Надеюсь, я вас правильно понял:

const data = {
  "text": "Do you have questions or comments and do you wish to contact ABC? Please visit our customer support page.",
  "entityRanges": [{
      "type": "LINK",
      "offset": 83,
      "length": 16,
      "data": {
        "target": "_self",
        "url": "/index.htm"
      }
    },
    {
      "type": "LINK",
      "offset": 7,
      "length": 4,
      "data": {
        "target": "_self",
        "url": "/index.htm"
      }
    }
  ]
};

function breakData(data) {
  let {
    entityRanges,
    text
  } = data;
  const result = [];
  let finalPart = '';
  let index = 0;

  entityRanges
    .sort((a, b) => a.offset - b.offset)
    .forEach((styleRange) => {
      const {
        offset,
        length,
        type,
        data
      } = styleRange;
      const firstPart = text.substring(index, offset);

      result.push({
        type: 'text',
        text: firstPart,
      });

      index = offset + length; // + 1;
      const secondPart = text.substring(offset, index);
      result.push({
        type,
        data,
        text: secondPart,
      });

      finalPart = text.substring(index);
    });

  if (finalPart) {
    result.push({
      type: 'text',
      text: finalPart,
    });
  }
  data.embbeded = result;

  return data;
}

const result = breakData(data);

document.body.innerHTML = '<pre>' + JSON.stringify(result, null, ' ') + '</pre>';

Другие вопросы по теме