如何通过指定字符起止索引用标签包裹文本范围（JavaScript）

Got it, let's tackle this problem—we need to wrap a specific range of text in a target element using nothing but plain JavaScript, no third-party libraries required. Here's a solid implementation that handles the example you provided, plus some edge cases to keep things robust.

Step-by-Step Implementation #

First, let's start with the HTML structure you're working with:

<div id="my_text_area">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Now here's the JavaScript code to wrap the text range (start index 18, end index 26 in your example):

function wrapTextByIndexes(elementId, startIdx, endIdx, wrapperTag = 'span', wrapperAttrs = {}) {
  // Get the target element
  const element = document.getElementById(elementId);
  if (!element) {
    console.error(`Element with id "${elementId}" not found`);
    return;
  }

  const text = element.textContent;
  
  // Validate index values to avoid errors
  if (startIdx < 0 || endIdx > text.length || startIdx >= endIdx) {
    console.error('Invalid start or end index values');
    return;
  }

  // Split the text into three parts: before, selected, after
  const beforeText = text.slice(0, startIdx);
  const selectedText = text.slice(startIdx, endIdx);
  const afterText = text.slice(endIdx);

  // Build the wrapper tag with attributes
  let wrapperHtml = `<${wrapperTag}`;
  for (const [key, value] of Object.entries(wrapperAttrs)) {
    wrapperHtml += ` ${key}="${value}"`;
  }
  wrapperHtml += `>${selectedText}</${wrapperTag}>`;

  // Combine all parts and update the element's HTML
  element.innerHTML = `${beforeText}${wrapperHtml}${afterText}`;
}

// Usage example matching your requirements
wrapTextByIndexes(
  'my_text_area',
  18,
  26,
  'span',
  { id: 'my_sub_selection' }
);

How It Works #

Let's walk through what this code does:

• Element Validation: First it checks if the target element exists to avoid null errors.
• Index Validation: It makes sure the start and end indexes are within valid bounds (start can't be negative, end can't exceed text length, start must be less than end).
• Text Splitting: It slices the original text into three segments: everything before the start index, the text we want to wrap, and everything after the end index.
• Wrapper Construction: It dynamically builds the wrapper tag (default is <span>) with any attributes you pass in (like the id in your example).
• Update Content: Finally, it combines all parts and replaces the element's inner HTML with the new content.

Example Output #

After running the function with your specified indexes, the my_text_area element will have this HTML:

<div id="my_text_area">Lorem ipsum dolor <span id="my_sub_selection">sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

This matches exactly what you were looking for, and it's flexible enough to work with different elements, indexes, wrapper tags, and attributes.

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