vue3 处理文字 根据文字单独添加class

下面写的是根据后端返回的html 提取我需要的标签和字 将他们单独添加样式

后端返回的数据 大概类似于'<h1>2024年“双11”购物节网络零售监测报告</h1><p>表1 “双11” 期间网络零售热销品类TOP10</p>'

function checkfun(newList){
    if (newList) {
        let processedAnswer = newList
         // 这个是判断如果是h2标签里面只有前言这两字的时候就添加class
        .replace(    
            /<h2>(前言)<\/h2>/gs, 
            '<h2><span class="titleclass">$1</span></h2>'
        // 这个是判断如果是h2标签里面只有报告说明这两字的时候就添加class
        ).replace(
            /<h2>(报告说明)<\/h2>/gs,
            '<h2><span class="titleclass">$1</span></h2>'
        // 这个是判断如果是如果包含表1,图1等的时候就添加class
        ).replace(
            /((?:表|图)\d+.*?)(?=(?:<p>|<\/p>|<h2>|<h3>|<li>|<\/li>|$))/gs,
            '<span class="picture">$1</span>'
        )
        // 这个是判断如果是如果注的时候就添加class
        .replace(
            /((?:注)\d+.*?)(?=(?:<p>|<\/p>|<h2>|<h3>|<li>|<\/li>|$))/gs,
            '<span class="pour">$1</span>'
        )

        // 添加表格处理逻辑  --- 这个是我根据标准的table格式进行添加class
        const doc = parseHTML(processedAnswer);
        const tables = doc.querySelectorAll('table');
        tables.forEach((table) => {
            // 判断是否是table是否只有一个表头
            const thead = table.querySelector('thead');
            const theadLength = thead?.rows[0]?.cells.length || 0;
            if (theadLength === 1) {
                table.classList.add('single-header');
            }
            // 判断表身里面的数据 是否是数字
            const tbody = table.querySelector('tbody');
            tbody?.querySelectorAll('td').forEach((td) => {
                if (isStringNumber(td.textContent)) {
                    td.classList.add('single-cell');
                }
            });

            // 检查表头是否包含“排名”字段  -- 并且排名这个字段必须在第一位
            const headers = table.querySelectorAll('thead th:first-child');  
            const rankIndex = Array.from(headers).findIndex(header => header.textContent.trim() == '排名');  
            // 如果找到排名列，为所有对应单元格添加样式
            if (rankIndex !== -1) {
                // 获取所有行数据
                const rows = table.querySelectorAll('tbody tr');
                
                rows.forEach(row => {
                    const cells = row.querySelectorAll('td');
                    if (cells.length > rankIndex) {
                        cells[rankIndex].classList.add('rank-column');
                    }
                });
            }
        });
        
        // 获取到所有的p标签和li标签 判断里面是否有数字和英文 如果有的话将他们单独添加class
        const pElements = doc.querySelectorAll('p, li');
        pElements.forEach(p => {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = p.innerHTML;
            
            const walker = document.createTreeWalker(tempDiv, NodeFilter.SHOW_TEXT);
            
            let node;
            while ((node = walker.nextNode())) {
                const parent = node.parentNode;
                const text = node.textContent;
                let lastIndex = 0;
            
                // 改进后的正则表达式
                const numberRegex = /(-?\d+(?:\.\d+)?|[a-zA-Z']+)/g;
            
                let numberMatch;
                while ((numberMatch = numberRegex.exec(text)) !== null) {
                    const span = document.createElement('span');
                    span.className = 'english-style';
                    span.textContent = numberMatch[0];
                    
                    const textBefore = document.createTextNode(text.slice(lastIndex, numberMatch.index));
                    parent.insertBefore(textBefore, node);
                    parent.insertBefore(span, node);
                    
                    lastIndex = numberRegex.lastIndex;
                }

                // 添加剩余文本
                if (lastIndex < text.length) {
                    const remainingText = document.createTextNode(text.slice(lastIndex));
                    parent.insertBefore(remainingText, node);
                }
                parent.removeChild(node);
            }
            p.innerHTML = tempDiv.innerHTML;
        });

        // 将处理后的DOM转换回HTML字符串
        processedAnswer = serializeHTML(doc.body);

        processedList.value = processedAnswer
    }
}

const isStringNumber = (str) => {
    // 匹配整数、小数、负数
    const numberRegex = /^[-+]?(?:\d{1,3}(?:,\d{3})*(?:\.\d+)?|\d+(?:\.\d*)?|\.\d+)$/;
    return numberRegex.test(str);
};

// 转化为html
function parseHTML(htmlString) {
  const parser = new DOMParser();
  return parser.parseFromString(htmlString, 'text/html');
}

// 添加HTML序列化工具函数
function serializeHTML(node) {
  const temp = document.createElement('div');
  temp.appendChild(node.cloneNode(true));
  return temp.innerHTML;
}

px,pt,em换算表 | 菜鸟教程https://www.runoob.com/w3cnote/px-pt-em-convert-table.html像素与磅换算 -- EndMemohttps://endmemo.com/topography/pixelpointcn.html