下面写的是根据后端返回的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格式进行添加classconst 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标签 判断里面是否有数字和英文 如果有的话将他们单独添加classconst 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;});// 遍历所有p标签进行处理doc.querySelectorAll('p').forEach(p => {if (p.innerHTML.includes(') { // 如果是图片格式的话const span = document.createElement('span');span.innerHTML = p.innerHTML;p.replaceWith(span);}});// 将处理后的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
)
