JavaScript中按索引替换子字符串方法咨询（Markdown转码场景）

Alright, I get exactly what you're dealing with—building a custom Markdown parser where regex won't cut it because you're relying on token indices to target specific parts of the text. Let's break down a solid, straightforward solution for this.

Core Replacement Function #

JavaScript's native String doesn't have a built-in replaceSubString method, but we can easily build one by leveraging string slicing. The idea is to split the original string into three parts:

1. Everything before the start index of your target substring
2. Your replacement content
3. Everything after the end index of your target substring

Then just concatenate those three parts together. Here's the implementation:

function replaceSubString(str, startIndex, endIndex, replacement) {
  // Handle edge cases to avoid unexpected behavior
  if (startIndex < 0 || endIndex > str.length || startIndex >= endIndex) {
    return str; // You could also throw an error here if invalid indices should break execution
  }
  return str.slice(0, startIndex) + replacement + str.slice(endIndex);
}

How to Use It for Your Markdown Example #

Let's say you have the string ** random text ** and your token tells you to replace the first two characters (indices 0 to 2) with <strong>, and the last two characters (indices 14 to 16, assuming the full string length is 16) with </strong>. You'd call the function twice:

let myText = "** random text **";
// Replace opening **
myText = replaceSubString(myText, 0, 2, "<strong>");
// Replace closing **
myText = replaceSubString(myText, myText.length - 2, myText.length, "</strong>");

console.log(myText); // Output: "<strong> random text </strong>"

Handling Multiple Tokens (Avoid Index Shifts!) #

If you're dealing with multiple tokens in a single string, you need to be careful about index shifting. When you replace a substring, the length of the string changes, which would throw off any indices that were calculated based on the original string.

The fix here is to process tokens from the end of the string to the beginning. This way, replacing a later substring doesn't affect the indices of earlier (left-side) tokens.

Here's a helper function to handle batch replacements safely:

function applyTokenReplacements(originalStr, tokens) {
  // Sort tokens by their end index in descending order
  const sortedTokens = [...tokens].sort((a, b) => b.end - a.end);
  
  let processedStr = originalStr;
  for (const token of sortedTokens) {
    processedStr = replaceSubString(processedStr, token.start, token.end, token.replacement);
  }
  return processedStr;
}

// Example usage with mixed bold and italic tokens
const originalText = "** bold text ** and * italic text *";
const tokens = [
  { start: 0, end: 2, replacement: "<strong>" },
  { start: 12, end: 14, replacement: "</strong>" },
  { start: 19, end: 20, replacement: "<em>" },
  { start: 33, end: 34, replacement: "</em>" }
];

const parsedText = applyTokenReplacements(originalText, tokens);
console.log(parsedText); 
// Output: "<strong> bold text </strong> and <em> italic text </em>"

Key Notes #

• Edge Case Handling: The core function includes basic checks for invalid indices, but you can adjust this to match your parser's needs (e.g., throw a RangeError if indices are out of bounds).
• Immutability: Remember that strings in JavaScript are immutable—every replacement creates a new string, which is fine for most parsing use cases unless you're dealing with extremely large texts (in which case you might want to use an array of characters for more efficient manipulation).

内容的提问来源于stack exchange，提问作者Estout