主页 / 问题 / 1537167
Accepted
Talleyran
Asked:2023-08-23 02:51:16 +0000 UTC2023-08-23 02:51:16 +0000 UTC

如何根据索引给出的位置排列文本中的html标签？

  • 772

有一段纯文本，还有一个单独的对象数组，描述其内部的格式，如下所示：

let text = "Привет, я текст.";
let format = [
   {
      type: "bold",
      start: 0,
      end: 6
   },
   {
      type: "italic",
      start: 0,
      end: 1
   },
   {
      type: "strike",
      start: 9,
      end: 14
   },
];

因此，有必要对文本应用格式，将位置 到 的字符换行start到end相应的 html 标签中。种类较多，但主要原理如下。例如，它们可以定义如下：

const types = {
   bold: {
      start: "<b>",
      end: "</b>"
   },
   italic: {
      start: "<i>",
      end: "</i>"
   },
   strike: {
      start: "<del>",
      end: "</del>"
   },
   other: {
      start: "<span class='other'>",
      end: "</span>"
   },
};

预期结果：

<b><i>П</i>ривет<b>, я <del>текст</del>.

问题是，如果您只是将格式化对象一致地应用于同一文本，则索引将在第二步中移出。此外，开始和结束标签具有不同的可变长度。怎么做？

javascript

2 个回答

  1. Best Answer

    PS：你有一个strike字段start，end需要向右移动1个字符

    简单选项：

    我们将 format 转换为特定位置的标记数组，然后按插入索引对它们进行排序并插入：

    tokens = []
for (var i in format){
    tokens.push({token: types[format[i].type].start, pos: format[i].start})
    tokens.push({token: types[format[i].type].end, pos: format[i].end})
}

// Сортируем токены так, что бы они шли в обратном порядке
tokens = tokens.sort((a, b) => a.pos > b.pos ? -1 : a.pos === b.pos ? 0 : 1)
// Функция для вставки текста
function insertText(original, pos, text){
  return original.slice(0, pos) + text + original.slice(pos);
}

for (var i in tokens){
  text = insertText(text, tokens[i].pos, tokens[i].token)
}

    此选项并未过度优化，因为它会在每个标记上插入文本。如果您使用非常大的数据数组并且需要更复杂和更快的选项，那么请写下来，我可以实现它。

    但我认为这就足够了

    • 1

  2. 怎么做？

    我会提供这个选项。确实，format我重建了原始数组......

    const text = "Привет, я текст.";
const format = [
   {
      type: "bold",
      start: 0,
      end: 6
   },
   {
      type: "italic",
      start: 0,
      end: 1
   },
   {
      type: "strike",
      start: 9,
      end: 14
   },
];
console.log(test(text, format))
//
function test(text, format) {
  const types = {
     bold: {
        start: "<b>",
        end: "</b>"
     },
     italic: {
        start: "<i>",
        end: "</i>"
     },
     strike: {
        start: "<del>",
        end: "</del>"
     },
     other: {
        start: "<span class='other'>",
        end: "</span>"
     },
  };
  const o = format.reduce((obj, o) => {
    if (!obj[o.start]) obj[o.start] = []
    obj[o.start].push({type: o.type, end: o.end})
    return obj
  }, {})
  let res = ''
  let i = 0
  Object.keys(o).forEach(k => {
    o[k].sort((a, b) => a.end - b.end)
    k = +k
    res += text.slice(i, k)
    i = k
    o[k].slice().reverse().forEach(o => {
      res += types[o.type].start
    })
    o[k].forEach(o => {
      res += text.slice(i, o.end)
      res += types[o.type].end
      i = o.end
    })
  })
  return res
}

    • 0

相关问题