如何使用 match 函数或其他方式检索 <span> 和 </span> 之间的多个单词？

Question

说我的字符串是这样的：

var testexample = <p nameIt="Title">Title_Test</p><figure class="t15"><table><thead><tr>

<th><span>Column1</span></th><th><span>Column2</span></th></tr></thead><tbody><tr><td><span>Entry1</span></td><td><span>Entry2</span></td><td><span>ready</span></td></tr></tbody></table></figure><p ex="ready">!aaa; 

这是一个相当长的字符串，但它是一个以字符串形式写出的表格。<span>我如何从和之间获取单词</span>？例如，我希望它返回 Column1、Column2、Entry1、Entry2（也许在一个数组中？）

到目前为止，这是我尝试过的：

storing = testexample.match(/<span>(.*)</span>/);

但它只返回“Column1”我也试过做 matchAll、exec 和做/<span>(.*)</span>/g。这些结果给了我整个字符串，什么也没有，比如<th><span>Column1</span></th>，或者只是“Column1”。我是 javascript 的新手，所以我不确定自己做错了什么，因为我已经阅读了这方面的文档。任何帮助，将不胜感激。谢谢。

Answer 1

您的正则表达式应该使用全局和多标志——但除此之外，您需要检查多个实例……像这样：<\s*span[^>]*>(.*?)<\s*\/\s*span\s*>因为如前所述，您无法使用正则表达式可靠地解析 HTML——我尽了最大努力确保您仍然可以在标签内使用样式或属性<span>。IE<span style="color:#FF0000;">仍然可以使用我提供的示例。

Answer 2

为了帮助您找到答案，您应该提供您希望用于此类工作的环境信息。它是浏览器还是 node.js，你有 HTML 作为文本还是在页面中？我会针对您的问题提出另一种解决方案，即创建您将查询以提取所需数据的dom 元素。/** * Helper function to transform HTML string to dom element * @param {string} html * @param {string} elementType * @returns {HTMLDivElement} */function htmlToElement(html, elementType = 'div') {  const template = document.createElement(elementType);  template.innerHTML = html.trim(); // Never return a text node of whitespace as the result  return template;}const htmlString = `<p nameIt="Title">Title_Test</p><figure class="t15"><table><thead><tr><th><span>Column1</span></th><th><span>Column2</span></th></tr></thead><tbody><tr><td><span>Entry1</span></td><td><span>Entry2</span></td><td><span>ready</span></td></tr></tbody></table></figure><p ex="ready">`; const element = htmlToElement(htmlString);// extract inner text from spans as array of stringsconst arrayOfWords = [...element.querySelectorAll('span')].map(span => span.innerText);// convert array of strings to space separated stringconst wordsJoinedWithSpace = arrayOfWords.join(' ');// log a result in a consoleconsole.log({arrayOfWords, wordsJoinedWithSpace});

Answer 3

正如所指出的，您无法使用 Regex 可靠地解析随机 HTML。但是，假设您只想解析问题中的那种 HTML 表，这是您的正则表达式：<span>(.*?)<\/span>我改变了几件事：你没有逃脱/in</span>所以你的正则表达式实际上提前结束了我?在匹配任何部分中添加了一个。这样，正则表达式将匹配最短的可能序列，因此您可以匹配所有跨度。调用match将匹配此正则表达式的所有出现。这也将包括<span>/</span>部分修剪开始和结束<span>部分这是完整的例子：var testexample = `<p nameIt="Title">Title_Test</p><figure class="t15"><table><thead><tr><th><span>Column1</span></th><th><span>Column2</span></th></tr></thead><tbody><tr><td><span>Entry1</span></td><td><span>Entry2</span></td><td><span>ready</span></td></tr></tbody></table></figure><p ex="ready">!aaa`;var regex = /<span>(.*?)<\/span>/g;var match = testexample.match(regex);var columnContent = match.map(m => m.replace("<span>", "").replace("</span>", ""));console.log(columnContent[0]); // Column1console.log(columnContent[1]); // Column2