JavaScript截取指定子串并追加自定义HTML标签的实现问题

Hey there! Let's get this fixed for you. The issue with your original code is that manually slicing the HTML string using a pos value can be error-prone (especially if the word's position isn't perfectly calculated), and you're not accounting for the full structure of the HTML tag like attributes.

Here are two reliable approaches to achieve your desired output:

Approach 1: Using jQuery DOM Manipulation (Cleaner for Existing Elements) #

If you're working with a jQuery element already in the DOM, this method avoids manual HTML string splicing:

// Define your target word and select the element
const targetWord = 'at';
const $hgcElement = $('hgc[attr="something"]');

// Get the current content inside the <hgc> tag
let elementContent = $hgcElement.html();

// Remove the target word (as a standalone word) from the content
// The regex ensures we don't match partial words (e.g., "at" in "late" won't be hit)
elementContent = elementContent.replace(new RegExp(`\\s*\\b${targetWord}\\b\\s*`, 'i'), '');

// Update the <hgc> element's content and append the <hgb> tag after it
$hgcElement.html(elementContent);
$hgcElement.after(`<hgb>${targetWord}</hgb>`);

This will turn your original element into:
<hgc attr="something">late </hgc><hgb>at</hgb>

Approach 2: Direct String Replacement (For Raw HTML Strings) #

If you're working with a raw HTML string instead of a DOM element, use a regex that safely captures the full tag structure:

const originalMarkup = '<hgc attr="something">late at</hgc>';
const targetWord = 'at';
const targetTag = 'hgc';

// Regex breakdown:
// $1: Captures the opening tag (including attributes)
// $2: Content before the target word
// $3: The target word itself
// $4: Content after the target word (if any)
// $5: Captures the closing tag
const regexPattern = new RegExp(`(<${targetTag}.*?>)(.*?)(\\b${targetWord}\\b)(.*?)(<\\/${targetTag}>)`, 'i');
const updatedMarkup = originalMarkup.replace(regexPattern, '$1$2$4$5<hgb>$3</hgb>');

console.log(updatedMarkup);
// Output: <hgc attr="something">late </hgc><hgb>at</hgb>

Why Your Original Code Failed #

Your code relied on a fixed pos value to slice the string, which can break if the word's position changes, or if there are extra spaces/characters around it. Using regex with word boundaries (\\b) ensures we only match the exact standalone word, and manipulating the DOM directly avoids having to manually handle tag attributes and structure.

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