Truncate Text with Pattern

Question

I want to truncate text in a pattern, this is a function to highlight text from an array containing matched indexes and text, but I want to truncate the text which doesn't include the part with match, see code below

const highlight = (matchData, text) => {
  var result = [];
  var matches = [].concat(matchData);
  var pair = matches.shift();

  for (var i = 0; i < text.length; i++) {
    var char = text.charAt(i);
    if (pair && i == pair[0]) {
      result.push("");
    }

    result.push(char);
    if (pair && i == pair[1]) {
      result.push("");
      truncatedIndex = i;
      pair = matches.shift();
    }
  }
  return result.join("");
};

console.log(
  highlight(
    [[23, 29], [69, 74]],
    "Some text that doesn't include the main thing, the main thing is the result, you may know I meant that"
  )
);

// This returns the highlighted HTML - Result will be => "Some text that doesn't include the main thing, the main thing is the result, you may know I meant that"

But this returns whole text, I want to truncate other texts in the range, I want to truncate other text but not in range of 20 characters before and after the result so the text can be clean as well as understandable. Like

"... text that doesn't include the main thing ... the result you may know I ..."

I can't find out a way to make that. Help is appreciated.

Heretic Monkey · Accepted Answer

I've modified your function considerably, to make it easier to understand, and so that it works...

Instead of using an array of arrays, which I find cumbersome to deal with, I modified to use an array of objects. The objects are simple:

{
  start: 23,
  end: 30
}

Basically, it just adds names to the indices you had previously.

The code should be relatively easy to follow. Here's a line-by-line explanation:

Armed with the new structure, you can use a simple substring command to snip the appropriate piece of text.
Since we're in a loop, and I don't want two sets of ellipses between matches, I check to see if we're on the first pass through and only add an ellipses before the match on the first pass.
The text before the piece we've snipped is the 20 characters before the start of the match, or the number of characters to the beginning of the string. Math.max() provides a easy way of getting the highest index available.
The text after the piece we've snippet is the 20 characters after the end of the match, or the number of characters to the end of the string. Math.min() provides a easy way of getting the lowest index available.
Concatentating them together, we get the match's new text. I'm using template literals to make that easier to read than a bunch of + " " + and whatnot.

const highlight = (matches, text) => {
  let newText = '';
  matches.forEach((match) => {
    const piece = text.substring(match.start, match.end);
    const preEllipses = newText.length === 0 ? '... ' : '';
    const textBefore = text.substring(Math.max(0, match.start - 20), match.start);
    const textAfter = text.substring(match.end, Math.min(text.length - 1, match.end + 20));
    newText += `${preEllipses}${textBefore}${piece}${textAfter} ... `;
  });
  return newText.trim();
}

// Sample Usage
const result = highlight([{ start: 23,  end: 30 }, { start: 69, end: 75 }], "Some text that doesn't include the main thing, the main thing is the result, you may know I meant that");
console.log(result);
document.getElementById("output").innerHTML = result;
// Result will be => "... e text that doesn't include the main thing, the ... e main thing is the result, you may know I mea ..."

Note that I am using simple string concatenation here, rather than putting parts into an array and using join. Modern JavaScript engines optimize string concatenation extremely well, to the point where it makes the most sense to just use it. See e.g., Most efficient way to concatenate strings in JavaScript?, and Dr. Axel Rauschmayer's post on 2ality.

Truncate Text with Pattern

Answers (2)

Note

Original Version

Update

Related Questions