如何使用 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 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});

Answer 3

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

<span>(.*?)<\/span>

我改变了几件事：

1. 你没有逃脱/in</span>所以你的正则表达式实际上提前结束了

2. 我?在匹配任何部分中添加了一个。这样，正则表达式将匹配最短的可能序列，因此您可以匹配所有跨度。

3. 调用match将匹配此正则表达式的所有出现。这也将包括<span>/</span>部分

4. 修剪开始和结束<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]); // Column1

console.log(columnContent[1]); // Column2