JS截取字符串substr 和 …

本文详细介绍了JavaScript中的两个重要字符串方法:substr和substring。通过具体的示例展示了如何使用这两个方法来提取字符串的不同部分,并解释了它们之间的主要区别。

substr 方法
返回一个从指定位置开始的指定长度的子字符串。

stringvar.substr(start [, length ])

参数
stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

说明
如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

示例
下面的示例演示了substr 方法的用法。

function SubstrDemo(){
   var s, ss;                // 声明变量。
   var s = "The rain in Spain falls mainly in the plain.";
   ss = s.substr(12, 5); // 获取子字符串。
   return(ss);               // 返回 "Spain"。
}


substring 方法
返回位于 String 对象中指定位置的子字符串。

strVariable.substring(start, end)
"String Literal".substring(start, end)

参数
start

指明子字符串的起始位置,该索引从 0 开始起算。

end

指明子字符串的结束位置,该索引从 0 开始起算。

说明
substring 方法将返回一个包含从 start 到最后(不包含 end )的子字符串的字符串。

substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点。例如, strvar.substring(0, 3) 和 strvar.substring(3, 0) 将返回相同的子字符串。

如果 start 或 end 为 NaN 或者负数,那么将其替换为0。

子字符串的长度等于 start 和 end 之差的绝对值。例如,在 strvar.substring(0, 3) 和 strvar.substring(3, 0) 返回的子字符串的的长度是 3。

示例
下面的示例演示了 substring 方法的用法。

function SubstringDemo(){
   var ss;                         // 声明变量。
   var s = "The rain in Spain falls mainly in the plain..";
   ss = s.substring(12, 17);   // 取子字符串。
   return(ss);                     // 返回子字符串。
}

<table align="center" border="0" cellpadding="0" cellspacing="0" class="tableForm" style="table-layout: fixed;"> <colgroup> <col width="80" /> <col /><!--hide4phone.start--> <col width="80" /> <col width="380" /><!--hide4phone.end--> </colgroup> <tbody> <tr> <td style="text-align: right;">&nbsp;<span style="color: rgb(255, 0, 0);">*</span>Subject:</td> <td dbf.type="required" id="dbf.subject">&nbsp;</td> <!--show4phone.start></tr><tr><show4phone.end--> <td style="text-align: right;">&nbsp;Status:</td> <td><span id="mapping.dbf.procXSource">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Responsor: <span id="mapping.dbf.responsorSource">&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Participants: <span id="mapping.dbf.participantsSource">&nbsp;</span></td> </tr> </tbody> </table> <div>&nbsp;</div> <div style="text-align: center;"> <h1><img src="../common/logo.png" /> [Form Name]</h1> </div> <div>[Design form here, based on the template below, or customized by yourself after the template removed]</div> <table align="center" border="0" cellpadding="0" cellspacing="0" class="tableListBorder" style="table-layout: fixed;"> <colgroup> <col width="130" /> <col /><!--hide4phone.start--> <col width="130" /> <col width="330" /><!--hide4phone.end--> </colgroup> <tbody> <tr> <td colspan="4" colspan4phone="2" dbf.source="" dbf.type="" style="background-color: lightyellow;">&nbsp;<strong>[Brief Information]</strong></td> </tr> <tr> <td class="fieldLabel" style="text-align: center; width: 147px;"><span style="color: red;">*</span>&nbsp;username</td> <td id="username" style="width: 210px;">&nbsp;</td> <!--show4phone.start--> </tr> <tr><!--show4phone.end--> <td class="fieldLabel" style="text-align: center; width: 63px;"><span style="color: red;">*</span>&nbsp;id</td> <td id="ID" style="width: 254px;">&nbsp;</td> </tr> <tr> <td class="fieldLabel" style="text-align: center;">项目名称</td> <td id="项目名称" style="width: 210px;">&nbsp;</td> <td class="fieldLabel" style="text-align: center;">装置名称</td> <td id="装置名称" style="width: 254px;">&nbsp;</td> </tr> <tr> <td class="fieldLabel" style="text-align: center;">Customer Name</td> <td id="CustomerName" style="width: 210px;">&nbsp;</td> <td class="fieldLabel" style="text-align: center;">E-NO/序列号</td> <td id="ENO号" style="width: 254px;">&nbsp;</td> </tr> <tr> <td class="fieldLabel" style="text-align: center;">产品描述</td> <td id="产品描述" style="width: 210px;">&nbsp;</td> <td class="fieldLabel" style="text-align: center;">Remark</td> <td id="Remark" style="width: 254px;">&nbsp;</td> </tr> <tr> <td class="fieldLabel" style="text-align: center;">Subject</td> <td id="subjectid" style="width: 210px;">&nbsp;</td> <td class="fieldLabel" dbf.source="" dbf.type="" id="" style="text-align: center;">&nbsp;</td> <td dbf.source="" dbf.type="" id="" style="width: 254px;">&nbsp;</td> </tr> <tr> <td colspan="4" colspan4phone="2" dbf.source="" dbf.type="" style="background-color: lightyellow;"><strong>&nbsp;</strong><strong>[Detailed Information]</strong></td> </tr> </tbody> </table> <div style="text-align: center; margin: 20px 0;">&nbsp; &nbsp; &nbsp; &nbsp; <input id="idslist" name="idslist" type="hidden" /> &nbsp;<input id="sql内容" name="sql内容" type="hidden" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <strong> <input id="check" name="check" onclick="clickData()" type="button" value="check记录" /> </strong> <strong> <input id="check2" name="check2" onclick="clickData2()" type="button" value="下载结果" /> </strong></div> <!-- ==================== 移动端表格占位(暂不使用)==================== --><!-- ==================== 查询结果表格容器 ==================== --> <div id="resultTableContainer" style="margin-top: 20px; padding: 0 10px; min-height: 20px;"><!-- 动态表格将插入到这里 --></div> <div class="slide4phone2" id="reptable" style="display:none;"> <table align="center" border="0" cellpadding="0" cellspacing="0" class="tableListBorder2" style="width: 1300px;"> </table> </div> <!-- ==================== 核心脚本:查询与渲染 ==================== --><script language="javascript"> function clickData() { // 防止重复点击 if (window.__isQuerying) { console.warn("请勿频繁点击!"); return; } window.__isQuerying = true; console.log('=== 开始执行 clickData ==='); try { // 获取所有输入字段 var projectName = $("项目名称").value ? $("项目名称").value().trim() : ""; var deviceName = $("装置名称").value ? $("装置名称").value().trim() : ""; var customerName = $("CustomerName").value ? $("CustomerName").value().trim() : ""; var enonumber = $("ENO号").value ? $("ENO号").value().trim() : ""; var remark = $("Remark").value ? $("Remark").value().trim() : ""; var productDesc = $("产品描述").value ? $("产品描述").value().trim() : ""; var formsubject = $("subjectid").value ? $("subjectid").value().trim() : ""; /** * 转义 SQL 字符串中的单引号(' → '') */ function escapeSql(str) { if (typeof str !== 'string' && typeof str !== 'number') return ''; return String(str).replace(/'/g, "''"); } // 构建模糊匹配参数 var pName = '%' + escapeSql(projectName) + '%'; var dName = '%' + escapeSql(deviceName) + '%'; var cName = '%' + escapeSql(customerName) + '%'; var enoNum = '%' + escapeSql(enonumber) + '%'; var rmk = '%' + escapeSql(remark) + '%'; var prodDesc = '%' + escapeSql(productDesc) + '%'; var subj = '%' + escapeSql(formsubject) + '%'; var subj2 = '%-' + escapeSql(formsubject) + '%'; // 拼接 SQL 查询语句 var sql = `SELECT Subject, Status, 申请人, 申请日期, 产品类别, 其他, type, 内勤, 系统, customer, ProjectName, DeviceName, 新产品, ENO序列号, 目标价, 数量, 产地, 含税报价, HandlerRemark, Remark, 描述 FROM X_BPM_DWH_819_InquiryLines WHERE ISNULL(ProjectName, '') LIKE '${pName}' AND ISNULL(DeviceName, '') LIKE '${dName}' AND ISNULL(customer, '') LIKE '${cName}' AND ISNULL([ENO序列号], '') LIKE '${enoNum}' AND ISNULL(Remark, '') LIKE '${rmk}' AND ISNULL(描述, '') LIKE '${prodDesc}' AND (ISNULL(Subject, '') LIKE '${subj}' OR ISNULL(Subject, '') LIKE '${subj2}') `; console.log("生成的SQL:", sql); // 调用后端服务获取数据 var rawResult = service("common.js", "getDbsRecords", sql, "array"); // 解析结果(支持各种脏数据格式) let arr = parseServiceResult(rawResult); // 渲染到页面 renderTable(arr); } catch (e) { console.error("【查询失败】", e); alert("查询出错:" + (e.message || e)); var container = document.getElementById("resultTableContainer"); if (container) { container.innerHTML = ` <div style="color:red;text-align:center;padding:10px;font-family:Arial;"> <strong>❌ 查询失败</strong><br/> ${e.message || e} </div> `; } } finally { window.__isQuerying = false; } } /** * 安全解析 service 返回的结果 * 支持:合法JSON / 非法JSON / JS数组字面量 / 字符串化数组 / null等 */ function parseServiceResult(rawResult) { console.log("【原始返回类型】", typeof rawResult); console.log("【原始内容】", rawResult); // 情况1:已经是数组 if (Array.isArray(rawResult)) { console.log("✅ 已识别为原生数组"); return rawResult; } // 情况2:null/undefined/false if (rawResult == null || rawResult === 'null' || rawResult === 'undefined') { console.warn("⚠️ 返回为空值"); return []; } // 转为字符串处理 let str = String(rawResult).trim(); if (!str) { console.warn("⚠️ 返回空字符串"); return []; } // 情况3:可能是HTML错误页(常见于服务异常) if (str.startsWith('<') || str.includes('<html') || str.toLowerCase().includes('error') || str.includes('Exception')) { console.error("🔴 返回了HTML错误页!", str.substring(0, 200)); throw new Error('服务端错误,请检查SQL语法或联系管理员'); } /** * 数据清洗函数:修复各种非法字符 */ function clean(str) { return str .replace(/\\\\/g, '\\') // 修复多个反斜杠 .replace(/"/g, '\\"') // 先转义双引号 .replace(/'/g, '"') // 单引号 → 双引号 .replace(/\\"/g, '"') // 还原正常引号 .replace(/\\n/g, '\\n') // 显式换行 .replace(/\\r/g, '\\r') .replace(/\\t/g, '\\t') .replace(/\n/g, '\\n') .replace(/\r/g, '\\r') .replace(/\t/g, '\\t') .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x9F]/g, '') // 移除控制字符 .replace(/^"(\[.*\])"$/, '$1') // 去掉 "[...]" 外层引号 .replace(/^"(\{.*\})"$/, '$1') .replace(/,\s*}/g, '}') // 去除对象尾部逗号 .replace(/,\s*]/g, ']'); // 去除数组尾部逗号 } // 尝试多种解析方式 const parsers = [ // 方式1:直接JSON.parse () => JSON.parse(str), // 方式2:清洗后再解析 () => JSON.parse(clean(str)), // 方式3:作为JS表达式执行(仅限可信环境) () => new Function(`return (${str});`)(), // 方式4:进一步清理后尝试 () => JSON.parse(clean(str).replace(/""/g, '"').replace(/"\s+:/g, '":').replace(/:\s+"/g, ':"')) ]; for (let i = 0; i < parsers.length; i++) { try { const result = parsers[i](); if (Array.isArray(result)) { console.log(`✅ 第 ${i+1} 种方式解析成功`); return result; } // 兼容 { data: [...] } 结构 if (result && Array.isArray(result.data)) return result.data; if (result && Array.isArray(result.rows)) return result.rows; } catch (e) { console.warn(`📌 方式 ${i+1} 解析失败`, e.message); } } // 情况5:手动解析简单二维数组字符串 [[...],[...]] if (/^\[\s*$$[^$$]*$\s*(,\s*$$[^$$]*$)*\s*\]$/.test(str)) { try { console.log("🔍 检测到疑似二维数组字符串,尝试手动解析"); const rows = str.match(/$[^$$]*$/g) || []; return rows.map(row => { return row.replace(/^\[/, '').replace(/\]$/, '') .split(',') .map(field => field.trim().replace(/^"(.*)"$/, '$1').replace(/^'(.*)'$/, '$1')); }).filter(r => r.length > 0); } catch (e) { console.error("手动解析失败", e); } } // 所有方式都失败 console.error("🔴 所有解析方式均失败", { raw: rawResult, cleaned: clean(str) }); throw new Error('返回数据格式异常,无法解析。请检查SQL是否正确或联系开发人员。'); } /** * 渲染查询结果为表格 */ function renderTable(arr) { var container = document.getElementById("resultTableContainer"); if (!container) return; // 清空容器 container.innerHTML = ''; if (!arr || arr.length === 0) { container.innerHTML = ` <p style="text-align:center;color:#999;font-style:italic;padding:20px;"> 📭 未找到匹配的数据。 </p> `; return; } // 创建表格 var table = document.createElement('table'); table.className = 'tableListBorder'; table.style.width = '100%'; table.style.tableLayout = 'fixed'; table.setAttribute('border', '1'); table.setAttribute('cellpadding', '6'); table.setAttribute('cellspacing', '0'); table.style.fontFamily = 'Arial, sans-serif'; table.style.fontSize = '13px'; // 表头 var thead = document.createElement('thead'); var headerRow = document.createElement('tr'); var headers = [ "Subject", "Status", "申请人", "申请日期", "产品类别", "其他", "类型", "内勤", "系统", "客户", "项目名称", "装置名称", "新产品", "E-NO/序列号", "目标价", "数量", "产地", "含税报价", "处理备注", "备注", "描述" ]; headers.forEach(function(text) { var th = document.createElement('th'); th.style.backgroundColor = '#f5f5f5'; th.style.textAlign = 'center'; th.style.padding = '10px'; th.style.whiteSpace = 'nowrap'; th.style.fontWeight = 'bold'; th.textContent = text; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); // 表体 var tbody = document.createElement('tbody'); arr.forEach(function(row, index) { if (!row || !Array.isArray(row) && typeof row !== 'object') { console.warn(`第 ${index} 行数据异常`, row); return; } var tr = document.createElement('tr'); Object.values(row).forEach(function(cell) { var td = document.createElement('td'); td.style.padding = '8px'; td.style.borderTop = '1px solid #eee'; td.style.wordBreak = 'break-word'; td.style.maxWidth = '200px'; td.textContent = cell == null ? '' : String(cell).trim(); tr.appendChild(td); }); tbody.appendChild(tr); }); table.appendChild(tbody); container.appendChild(table); console.log(`✅ 成功渲染 ${arr.length} 行数据`); } </script> <div id="resultTableContainer" style="margin-top: 20px; overflow-x: auto;">&nbsp;</div> [ENO序列号] 文字可以模糊匹配 但是纯数字 888888只能匹配到8
最新发布
10-22
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jarry.liu

如果对您有帮助,鼓励下博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值