JavaScript中精确计算HTML字符串字符数：兼顾可见字符与换行符

/**
 * 将HTML中的<br>标签标准化为文本换行符\n。
 * @param {string} htmlString 包含HTML内容的字符串。
 * @returns {string} 替换<br>后的字符串。
 */
function standardizeBreakLines(htmlString) {
    // 使用正则表达式匹配各种形式的<br>标签（包括<br/>, <br />等），并替换为\n。
    // /<br\s*\/?>/gi:
    //   <br      - 匹配字面量<br
    //   \s*     - 匹配零个或多个空格
    //   \/?     - 匹配零个或一个斜杠（用于自闭合标签）
    //   >       - 匹配字面量>
    //   g       - 全局匹配
    //   i       - 忽略大小写
    return htmlString.replace(/<br\s*\/?>/gi, '\n');
}

/**
 * 移除字符串中的所有HTML标签。
 * @param {string} processedString 经过初步处理的字符串。
 * @returns {string} 移除HTML标签后的字符串。
 */
function removeOtherHtmlTags(processedString) {
    // 使用正则表达式匹配所有HTML标签，并替换为空字符串。
    // /<[\s\S]*?>/g:
    //   <       - 匹配字面量<
    //   [\s\S]* - 匹配任何字符（包括换行符）零次或多次，确保能匹配跨行的标签内容
    //   ?       - 非贪婪匹配，防止匹配到多个标签
    //   >       - 匹配字面量>
    //   g       - 全局匹配
    return processedString.replace(/<[\s\S]*?>/g, '');
}

/**
 * 处理字符串中的HTML实体。
 * @param {string} stringWithoutTags 移除HTML标签后的字符串。
 * @returns {string} 处理HTML实体后的字符串。
 */
function handleHtmlEntities(stringWithoutTags) {
    // 将 替换为空格，将&替换为&。
    // 对于更全面的实体处理，可能需要一个更复杂的函数或第三方库。
    let result = stringWithoutTags.replace(/ /g, ' ');
    result = result.replace(/&/g, '&');
    // 可以根据需要添加更多实体处理
    // result = result.replace(/</g, '<');
    // result = result.replace(/>/g, '>');
    return result;
}

/**
 * 计算最终处理后字符串的字符数，包括换行符。
 * @param {string} finalProcessedString 经过所有预处理的字符串。
 * @returns {number} 最终的字符总数。
 */
function calculateFinalLength(finalProcessedString) {
    // 将所有\n换行符替换为单个字符（例如'a'或' '），确保它们在长度计算中占一个单位。
    // 然后返回字符串的长度。
    return finalProcessedString.replace(/\n/g, 'a').length;
}

/**
 * 精确计算HTML字符串的字符数，包括可见字符、HTML实体和换行符。
 * @param {string} htmlContent 待计算的HTML字符串。
 * @returns {number} 准确的字符总数。
 */
function countCharactersInHtml(htmlContent) {
    if (typeof htmlContent !== 'string') {
        console.warn("Input is not a string. Returning 0.");
        return 0;
    }

    // 1. 标准化HTML换行符（<br> -> \n）
    let tempString = standardizeBreakLines(htmlContent);

    // 2. 移除其他HTML标签
    tempString = removeOtherHtmlTags(tempString);

    // 3. 处理HTML实体（  -> ' ', & -> '&'）
    tempString = handleHtmlEntities(tempString);

    // 4. 计算最终字符数，确保\n也被计入
    return calculateFinalLength(tempString);
}

// 示例用法：
const htmlString1 = "ABC<br><br>DEC"; // 期望：3(ABC) + 1(\n) + 1(\n) + 3(DEC) = 8
const htmlString2 = "Hello World!<div>This is a test.</div>"; // 期望：11(Hello World!) + 1( ) + 4(This) + 1( ) + 1(is) + 1( ) + 1(a) + 1( ) + 4(test) + 1(.) = 26
const htmlString3 = "<p>Line 1<br/>Line 2</p>"; // 期望：6(Line 1) + 1(\n) + 6(Line 2) = 13
const htmlString4 = "<span>No tags here.</span>"; // 期望：12
const htmlString5 = "Mixed & Content with <br> Newline."; // 期望：5(Mixed) + 1( ) + 1(&) + 1( ) + 7(Content) + 1( ) + 4(with) + 1( ) + 1(\n) + 7(Newline) + 1(.) = 30

console.log(`"${htmlString1}" 字符数: ${countCharactersInHtml(htmlString1)}`); // 期望: 8
console.log(`"${htmlString2}" 字符数: ${countCharactersInHtml(htmlString2)}`); // 期望: 26
console.log(`"${htmlString3}" 字符数: ${countCharactersInHtml(htmlString3)}`); // 期望: 13
console.log(`"${htmlString4}" 字符数: ${countCharactersInHtml(htmlString4)}`); // 期望: 12
console.log(`"${htmlString5}" 字符数: ${countCharactersInHtml(htmlString5)}`); // 期望: 30

// 针对原始问题中的用户场景
const originalUserContent = `
ABC
<br>
<br>
DEC
`; // 假设用户输入的是带有<br>的HTML字符串
console.log(`原始用户场景 "${originalUserContent.trim()}" 字符数: ${countCharactersInHtml(originalUserContent)}`); // 期望: 8