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

编程问答 2022-06-09

问题描述

说我的字符串是这个

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上还很陌生，所以我不确定自己做错了什么，因为我已经阅读了此文档。任何帮助，将不胜感激。谢谢。

解决方法

@bobince关于why you should not even try to use regular expressions for parsing HTML

有一个很好的答案

为帮助您找到答案，您应该提供信息，说明您希望在该工作中使用哪种环境。

是浏览器还是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 strings
const arrayOfWords = [...element.querySelectorAll('span')].map(span => span.innerText);
// convert array of strings to space separated string
const wordsJoinedWithSpace = arrayOfWords.join(' ');
// log a result in a console
console.log({arrayOfWords,wordsJoinedWithSpace});

,

您的Regex应该使用global和multi标志-除此之外，您还需要检查多个实例..类似这样的东西：

<\s*span[^>]*>(.*?)<\s*\/\s*span\s*>

您可以在这里看到它的工作：

Rexex 101

ALSO ，因为如上所述，您不能使用正则表达式可靠地解析HTML-我尽力确保您仍然可以在<span>标记内使用样式或属性。IE <span style="color:#FF0000;">仍然可以使用我提供的示例。

这里还有另一个例子：

Regex 101

,

如前所述，您无法使用Regex可靠地解析随机HTML。但是，假设您只想解析问题中的HTML表，那么这就是您的正则表达式：

/

我做了几件事：

  1. 您没有逃过</span>中的?，因此您的正则表达式实际上是更早结束的
  2. 我在“任何内容都匹配”部分添加了match。这样，正则表达式将匹配最短的序列，因此您可以匹配所有跨度。
  3. 调用<span>将匹配此正则表达式的所有匹配项。这还将包括</span> / <span>部分
  4. 修剪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]); // Column1 console.log(columnContent[1]); // Column2的开始和结束部分

这是完整的示例：

const UrlParam = new URLSearchParams(window.location.search);
hotelId = UrlParam.get('hotelId');

htmljavascriptmatchmatch