突出显示文本会在文本的开头和结尾插入重复项

Question

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

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

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

当我从右向左突出显示sample text highlight时，它将插入在文本开头和末尾突出显示的任何内容，它将如下所示

“这是示例文本高亮显示sample text highlight示例文本突出显示”

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

当从左到右突出显示时，这非常有效，并且没有发现任何问题。

这是函数的注释

  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);```

Answer 1

这个问题已经解决了。我们对startIndex和endIndex进行了交换，这样即使startIndex大于endIndex，它仍然可以正常工作。