JS，正则表达式match方法，遇到空格返回异常的问题

cqwcns

JS中，富文本生成一段html代码。
以下正则表达式，我希望匹配出第一个h1元素中的内容（即提取文章标题）。
当文章标题包含空格（ ）时，匹配结果就变得异常，见以下代码几次测试结果。

[JavaScript] 纯文本查看 复制代码

  const str1 = '<h1>这是标题</h1><p>正文内容</p><h1>第一点</h1><p>一些内容</p><h1>第二点</h1><p>一些内容</p><p>其他内容</p>',
    str2 = '<h1> 这是 标题 </h1><p>正文内容</p><h1>第一点</h1><p>一些内容</p><h1>第二点</h1><p>一些内容</p><p>其他内容</p>',
    str3 = '<h1>这是 标题 </h1><p>正文内容</p>';

  console.log(str1.match(/<h1>(\S+?)<\/h1>/))  // 匹配到“这是标题”
  console.log(str2.match(/<h1>(\S+?)<\/h1>/))  // 匹配到“第一点”
  console.log(str3.match(/<h1>(\S+?)<\/h1>/))  // 结果为null

所以，这种需求，正则应该怎么写？才能准确提取第一个h1的内容。请各位大佬指教，感谢。

xiaoluoke4399

不太清楚要怎么弄

开心的一逼

尝试先整个匹配下来，然后去除空格？

hollsovan

[JavaScript] 纯文本查看 复制代码

    const str1 = '<h1>这是标题</h1><p>正文内容</p><h1>第一点</h1><p>一些内容</p><h1>第二点</h1><p>一些内容</p><p>其他内容</p>',
        str2 = '<h1> 这是 标题 </h1><p>正文内容</p><h1>第一点</h1><p>一些内容</p><h1>第二点</h1><p>一些内容</p><p>其他内容</p>',
        str3 = '<h1>这是 标题 </h1><p>正文内容</p>';

    // ?.防止因为匹配结果不存在而报错
    // trim()去除首尾空格
    let reg = /(?<=<h1>).*?(?=<)/;
    console.log(str1.match(reg)?.[0].trim());
    console.log(str2.match(reg)?.[0].trim());
    console.log(str3.match(reg)?.[0].trim());

冥界3大法王

@cqwcns
要么多次处理
要么用前后断言位置匹配

感觉此次第1种方案更务实

笨笨家的唯一

参考4楼采用断言处理或者试试【let reg = /h1>(.*？)<\/h1/ig】;
然后就是【console.log(str1.match(reg)?.[0].trim())】；得到结果后就可以处理了。
你写的主要问题在于【\S】只会匹配 【非空白符，不包括换行】，所以中间有空格就会结果异常

ccclbj

学习了，感谢分享

os51

var p = new DOMParser()
p.parseFromString(str1, 'text/html').querySelector('h1').innerText
p.parseFromString(str2, 'text/html').querySelector('h1').innerText
p.parseFromString(str3, 'text/html').querySelector('h1').innerText

判判~

[JavaScript] 纯文本查看 复制代码

const str = '<h1> 这是 标题 </h1><p>正文内容</p><h1>第一点</h1><p>一些内容</p><h1>第二点</h1><p>一些内容</p><p>其他内容</p>'
new DOMParser().parseFromString(str, 'text/html').querySelector('h1').textContent.trim()

// \S 匹配一个非空白字符