我需要以下方面的见解和建议 .

首先，我想指出我在技术上提出的系统是有效的 . 然而到达那里是非常繁琐的 . 我想优化这个过程，即使它意味着开始整个过程...

我写文章，有时超过我在网站上传的12000个单词 . 问题与我使用Angular 5，定义书形布局并希望在我的链接中插入指令这一事实有关 .

我的文本包括包含链接的段落（用于描述和对话）（在此示例中为括号之间） .

------------------文字示例--------------------

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore [magna aliqua]. Ut enim ad minim veniam, quis [nostrud] exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem [aperiam]. 
 - Sed ut perspiciatis unde omnis iste natus error sit ?
 - Inventore veritatis…
 Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.*

我将此文本转换为：

var str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore #magna aliqua|453#. Ut enim ad minim veniam, quis #nostrud|413|1k# exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ¤  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem #aperiam|498|10k#. ¤  - Sed ut perspiciatis unde omnis iste natus error sit ? ¤  - Inventore veritatis…¤¤ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. ¤"

根据“¤”字符拆分文本以创建段落 .

然后我将文本分成x个角色的行（最多取决于设备的宽度），然后再分页（取决于设备的高度） .

我最终根据我插入的链接拆分句子 . 如果有另一个“¤”字符，则句子再次分开 . 这些链接包含2或3个值，可以显示信息弹出窗口：

<a id="Lien[1]" (click)="openInfo(Lien)> Lien[0] </a>

您还会注意到我绝对需要一个指令（点击） .

这让我有几个适应屏幕的动态«DIV» . 我刷这些DIV以模仿电子书阅读器 .

正如我之前所说，这个系统有效，但非常繁琐 . 它有效，但我很确定我没有使用最有效的方法 .

你们中的任何人都有更好的主意吗？

这是plnkr演示：https://plnkr.co/edit/pvpcoU?p=info

和代码

html

<div id="pages">

script.js

window.onload = function() {

    var chapter = divideTextInFormattedPages(str);
    var currentDiv = document.getElementById("pages");


    chapter.forEach(val => {
        var text = val.text;
        var newDiv = document.createElement("p");
        newDiv.classList.add('page'); 
        text.forEach(elt => {
            elt.forEach(element => {
                var newContent = document.createTextNode(element);
                newDiv.appendChild(newContent);  
            });
            currentDiv.parentNode.insertBefore(newDiv, currentDiv.previousSibling);
        });
    });

};

library.js

function divideTextInFormattedPages(text) {
    var paragraphes = createPages(text, 320 / 15, 568 / 50);
    return addZindexToPages(paragraphes);
}

function createPages (arr, charmax, lignemax) {
var splittedtext = arr.match( /[^¤]+¤/g );
var chunkedLines = divideInMaxChar(splittedtext, charmax);
var chunkedPages = chunkPages(chunkedLines, lignemax);
var objectPages = createPageObject(chunkedPages);
return objectPages;
}

function divideInMaxChar(arr, charmax) {
var dividedLines = [];
var texts = [];
arr.forEach(val => {
  texts = chunkString(val, charmax);
  texts.forEach(element => {
    dividedLines.push(element);
  });
});
return dividedLines;
}

function createPageObject(arr) {
  var numpage = 1;
  var result = [];
  var newtext = [];
  arr.forEach(val => { // texte entier
    var spanOrLink = divideInSpanOrLink(val);
    result.push(
      {
        'page' : numpage++,
        'text' : spanOrLink,
        'flipped' : false
      }
    );
  });
  return result;
}

function addZindexToPages(chapter) {
var lengthChapter = Object.keys(chapter).length;
chapter.forEach(val => {
    val.zindex = 10000 + lengthChapter - val.page;
});
return chapter;
}

function chunkString(text, chunkSize) {
var result = [];
var words = text.split(' ');
  var line = '', lineLength = 0;
  for (var index = 0; index < words.length; index++) {
    var word = words[index];
    if (line.length > 0) {
      word = ' ' + word;
    }
    if (lineLength + wordLength(word) > chunkSize) {
      result.push(line);
      line = '';
      lineLength = 0;
      word = words[index];
    }
    line += word;
    lineLength += wordLength(word);
  }
  result.push(line);
return result;
}

function chunkPages(arr, chunkSize) {
var result= [];
for (var i = 0, len = arr.length; i < len; i += chunkSize) {
  result.push(arr.slice(i, i + chunkSize));
}
return result;
}

function divideInSpanOrLink(text) {
var arr = [];
text.forEach(element => {
  var splittedLines = element.split(/[#]/g);
        arr.push(splittedLines);
  });
return arr;
}

function precisionRound(number, precision) {
var factor = Math.pow(10, precision);
return Math.round(number * factor) / factor;
}

function wordLength(_word) {
// if it's a link, I only want to count the first word
  return _word[2] === '$' ? _word.substring(2, _word.length - 3).split('|')[0].length : _word.length;
}
regex angular optimization text directive