Javascript 高亮显示文本在文本的开头和结尾插入重复项

我只是需要你对我继承的一个项目的帮助和见解。 用户可以突出显示文本，并从该文本中打开注释框。这很有效。但我遇到的问题是，当您从右向左突出显示文本时，它会在突出显示的文本的开头和结尾插入实际文本

举个例子，这就是发生的情况

“这是一个示例文本突出显示”

当我从右向左突出显示

示例文本突出显示时，它将插入文本开头和结尾突出显示的内容，并显示如下“

“这是一个示例文本高亮度<代码>示例文本高亮度示例文本高亮度”

我对开发和编码非常陌生，我正在尝试对其进行反向工程，并试图理解语法的含义，但到目前为止，我还是被卡住了

从左到右突出显示时，效果非常好，并且找不到任何问题

这是函数的注释

  Basically, the member comments need to be highlighted from `startCharacter`
    to `endCharacter`. To achieve this we will insert some <span> tags around
    these regions and then render the HTML by marking it as "Safe" with `htmlSafe()`
  HOWEVER. This creates a problem: If the user includes HTML in their plan text,
    it will be rendered/executed.
  NOT WHAT YOU WANT (for Security reasons).
  SO. We need to first escape the user's plan text using `htmlEscape()`. 
  HOWEVER. This creates a SECONDARY problem, because now the indices stored
    in `startCharacter` and `endCharacter` are now incorrect, as we have changed
    the length of the string by changing `<` to `&lt;` etc. 
  SO HERE'S THE FINAL SOLUTION. 
      - FIRST we insert some very-unique strings at the `startCharacter` and
        `endCharacter` positions that are completely html-safe.
      - THEN we `htmlEscape()` the text. ```
      - THEN we find-replace the very-unique strings we inserted with the actual
        HTML we want.
      - THEN finally we mark the string as `htmlSafe()` so that our markup is rendered.

Update:
Here's some snippet of where I think the logic is:

```                function calculatePlanMarkup(planText, memberComments, currentCommentBeingEditedIndex) {
                  // "Very-unique" HTML-safe string for the start of the highlight
                  const START_MARKER_TEXT = (id) => `[@@__INSERT_SPAN_START(${id})]`;
                  // A regex that will match `START_MARKER_TEXT` and parse its `id` value
                  const START_MARKER_REGEX = /\[@@__INSERT_SPAN_START\((\d+)\)\]/g;
                  // The HTML to insert in place of START_MARKER
                  const START_MARKER_HTML = (index) => {
                    let commentHighlightId = getCommentHighlightSpanId(index);
                    // If this highlight is for the comment currently being edited, add `is-active` to it, too
                    let isCurrentCommentBeingEdited = index === currentCommentBeingEditedIndex;
                    return `<span class="${selectionClass} ${isCurrentCommentBeingEdited ? 'is-active' : ''}" id="${commentHighlightId}">`;
                  };

                  // "Very-unique" HTML-safe string for the end of the highlight
                  const END_MARKER_TEXT = () => `[@@__INSERT_SPAN_END]`;
                  // A regex that will match `END_MARKER_TEXT`
                  const END_MARKER_REGEX = /\[@@__INSERT_SPAN_END\]/g;
                  // The HTML to insert in place of END_MARKER
                  const END_MARKER_HTML = () => `</span>`;

                  let markup = planText;
                  let totalOffset = 0;

                  _.each(memberComments, (memberComment, index) => {
                    let startMarker = START_MARKER_TEXT(index);
                    let endMarker = END_MARKER_TEXT();

                    let startOffset = totalOffset + parseInt(memberComment.startCharacter);
                    let endOffset = totalOffset + parseInt(memberComment.endCharacter);


                    markup = markup.substring(0, startOffset) + /* Text, from the start, up to the selection region beginning */
                      startMarker + /* "Very Unique" start marker */
                      markup.substring(startOffset, endOffset) +  /* Text within the selection region */
                      endMarker + /* "Very Unique" end marker */
                      markup.substring(endOffset);  /* Text, from the end of the selection region, to the end */

                    totalOffset += startMarker.length + endMarker.length;
                  });

                  markup = htmlEscape(markup);
                  markup = markup.replace(START_MARKER_REGEX, (match, index) => START_MARKER_HTML(Number(index)));
                  markup = markup.replace(END_MARKER_REGEX, END_MARKER_HTML);

                  return htmlSafe(markup);```


基本上，需要从'startCharacter'突出显示成员注释`
要实现这一点，我们将在其周围插入一些标记
然后通过使用`htmlSafe（）将HTML标记为“安全”来呈现HTML`
但是，这会产生一个问题：如果用户在计划文本中包含HTML，
它将被呈现/执行。
不是你想要的（出于安全原因）。
因此，我们需要首先使用“htmlEscape（）”转义用户的计划文本。
但是，这造成了第二个问题，因为现在索引已存储
在'startCharacter'和'endCharacter'中，现在是不正确的，因为我们已经改变了
通过更改“`[@@@uuuu INSERT\u SPAN\u START（${id}）]”，字符串的长度；
//一个正则表达式，它将匹配'START\u MARKER\u TEXT'并解析其'id'值
常量START\u MARKER\u REGEX=/\[@@@u\u插入\u SPAN\u START\（\d+）\]/g；
//要插入以代替开始标记的HTML
常量开始标记HTML=（索引）=>{
让commentHighlightId=getCommentHighlightSpanId（索引）；
//如果此突出显示是针对当前正在编辑的注释，请将“是活动的”也添加到其中
让isCurrentCommentBeingEdited=index==currentCommentBeingEditedIndex；
返回``；
};
//突出显示结尾的“非常独特”HTML安全字符串
const END_MARKER_TEXT=（）=>`[@@__插入_SPAN_END]`；
//与“结束标记”文本匹配的正则表达式`
const END\u MARKER\u REGEX=/\[@@@u\u插入\u SPAN\u END\]/g；
//要插入以代替结束标记的HTML
const END_MARKER_HTML=（）=>`；
设markup=planText；
设totalOffset=0；
_.每个（成员评论，（成员评论，索引）=>{
让startMarker=开始标记文本（索引）；
让endMarker=END_MARKER_TEXT（）；
让startOffset=totalOffset+parseInt（memberComment.startCharacter）；
让endOffset=totalOffset+parseInt（memberComment.endCharacter）；
markup=markup.substring（0，startOffset）+/*文本，从开始到选择区域开始*/
startMarker+/*“非常独特”开始标记*/
选择区域内的markup.substring（startOffset，endOffset）+/*文本*/
endMarker+/*“非常独特”结束标记*/
markup.substring（endOffset）；/*文本，从选择区域的结尾到结尾*/
总偏移量+=开始标记器长度+结束标记器长度；
});
markup=htmlEscape（标记）；
markup=markup.replace（START\u MARKER\u REGEX，（match，index）=>START\u MARKER\u HTML（Number（index））；
markup=markup.replace（END\u MARKER\u REGEX，END\u MARKER\u HTML）；
返回htmlSafe（标记）```
此问题已解决。
我们已经为
startIndex
和
endIndex
进行了交换，这样，如果startIndex大于endIndex，它仍然可以正常工作。
请共享一些代码，以便我们可以帮助您。没有代码，就不可能真正理解问题及其解决方案。