JavaScript中的正则表达式.split()

Question

我需要将这样的字符串拆分：

<p>foo</p><p>bar</p>

将字符串转换为包含 "foo" 和 "bar" 的数组。

我想使用正则表达式来帮助我，但似乎我没有理解好。以下是我的尝试。

var inputText = "<p>foo</p><p>bar</p>";
splittedSelection = inputText.split("/<p>|<\/p>/g");

但我所能实现的只是一个具有一个条目并且与输入文本相同的数组。 我为您创建了一个小范例。 感谢任何帮助。

- Yashia

---

你这里不是在使用正则表达式，而是在使用字符串。splittedSelection = inputText.split(/<p>|<\/p>/g); - Axnyff

https://dev59.com/X3I-5IYBdhLWcg3wq6do#1732454 - epascarello

谢谢你，@epascarello。大家都去点击那个链接。 - jhhoff02

不要使用正则表达式解析HTML。 - Ulysse BN

请看@baao的回答 :) - Erazihel

我应该更明确我的目标。我需要准确地获取在开放和关闭的<p>标签之间的部分。我需要修改这些标签中的所有其他可能存在或不存在的HTML标记。 - Yashia

Answer 1

你应该使用/<p>|<\/p>/g而不是在引号内部输入。然而，这会产生["", "foo", "", "bar", ""]这样的结果，这是不可取的，所以你可以使用.filter()来过滤掉空结果，如下所示：

var inputText = "<p>foo</p><p>bar</p>";

splittedSelection = inputText.split(/<p>|<\/p>/g).filter(function(value) {
  // Filter out empty results
  return value !== "";
});

document.getElementById("bar").innerHTML += "0: " + splittedSelection[0] + "\n" + "1: " + splittedSelection[1] + "\n";

<div id="bar">
</div>

- Angelos Chalaris

Answer 2

你可以从这样的内容开始：

1. .+ 可以处理不同的标签和属性
2. .+? 创建了一个 惰性量词

const text = "<p>foo</p><p>bar</p>";

const re = /<.+?>(.+?)<\/.+?>/g;

console.log(text.split(re).filter(t => t));

- Hitmands

---

“惰性量词”=“通过在 + 后面添加 ?，告诉它尽可能地少重复，所以它找到的第一个匹配就是我们想要停止匹配的地方。” - 惰性 vs. 贪婪 https://dev59.com/qnE95IYBdhLWcg3wdtqj#2301298 - Avatar

Answer 3

假设这是在客户端上，您可以使用jQuery而不是正则表达式。

var inputText = "<p>foo</p><p>bar</p>";
var splittedSelection = $('<div>'+inputText+'</div>').find("p").map(function() { 
  return $(this).text() 
});
$.each(splittedSelection, function(i,item) {
  $("#bar").append(i+": " +item + "<br/>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="bar"></div>

- mplungjan

Answer 4

使用正则表达式的另一种解决方案：

let regex = /(?![<p>])(.*?)(?=[<\/p>])/g
  , inputText = "<p>foo</p><p>bar</p>";

let array = inputText.match(regex).filter(i => i);
  
console.log(array);

- BrTkCa

Answer 5

基于ES6的答案：

const regex = /<[^>]*>/gi;
let string = '<p>foo</p><p>bar</p>';
let result = string.split(regex).filter(e => e);

- oboshto

Answer 6

忘记那些试图修复你的正则表达式的答案。不要使用正则表达式。

相反，获取元素并将它们的textContent映射到一个数组中：

let res = Array.from(document.getElementsByTagName('p')).map(e => e.textContent);
console.log(res);

<p>foo</p><p>bar</p>

如果您只有此字符串且它不是文档的一部分，请创建一个元素并解析它（甚至不需要将元素附加到DOM）。

let s = "<p>foo</p><p>bar</p>";
let el = document.createElement('div');
el.innerHTML = s;

let res = Array.from(el.getElementsByTagName('p')).map(e => e.textContent);
console.log(res);

如果你在使用Node.js，你可以使用cheerio：

const cheerio = require('cheerio')
let html = "<p>foo</p><p>bar</p>";
const $ = cheerio.load(html);
let res = [];
$('p').each((i,e) => res.push($(e).text()));
console.log(res);

如果您在其他环境中进行此操作，那么很有可能也有可用的DOM/XML/HTML解析器。

- baao

---

这就像给要牛奶的人提供苹果一样，不是吗？这个任务应该用nodejs完成吗？ - Hitmands

不，这不是@Hitmands。它是在向那些做错了的人解释如何正确地做。如果你问我如何从桥上跳下来，我也会说最好不要这样做，而不是回答你原来的问题。我已经添加了一个适用于node的版本... - baao

我们都知道“正则表达式不应该被用作解析器”，但是他正在请求这样做...你可以添加一个建议的注释来更好地处理问题，但答案应该是答案... - Hitmands