Question

假设一篇文章生成了我的降价，其中包含1-N段落。今晚我的大脑有点油腻，我能想到的只有

var chunks = s.split('</p>');
if ( chunks.length > 3)
{
    s = chunks[1]+'</p>'+chunks[2]+'</p>'+chunks[3]+'</p>';
}

有没有更合理的方法将前三个段落收集成一个字符串？降价处理器保证段落应该是合法的HTML。但我确信必须有一个更聪明的正则表达式解决方案。如果还有其他类似的东西，那么这不会保证三个段落。但是没有。

Answer 1

这样的东西？

＆＃13;

var s= '<p>Paragraph 1</p><p>Paragraph <em>2</em></p><p>Paragraph 3</p><p>Paragraph 4</p><p>Paragraph 5</p>';

s= (s.split('</p>')
    .splice(0,3)
    .join('</p>') +
    '</p>'
   ).replace(/\<\/p> *\<\/p>/g,'</p>');

console.log(s);

＆＃13;

Answer 2

Id使用用于处理DOM的东西....比如jQuery

var arrP = $("body p").slice(0,3);
var strP = "";
for(var i = 0; i < arrP.length; i++)  
{
  strP += arrP[i].outerHTML;
}
console.log(strP);

//Or Taking the article in as a string
var strArticle = "<p>Parra <em>1</em></p><p>Parra <strong>2</strong></p><p>Parra 3</p><p>Parra 4</p>";
var divArticle = document.createElement('div');
divArticle.innerHTML = strArticle;

arrP = $(divArticle).find("p").slice(0,3);
strP = "";
for(var i = 0; i < arrP.length; i++)  
{
  strP += arrP[i].outerHTML;
}
console.log(strP);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Parra <em>1</em></p>
<p>Parra <strong>2</strong></p>
<p>Parra 3</p>
<p>Parra 4</p>
<div id="target"></div>

我不会仅仅使用jQuery，但如果您已经在使用它或寻找借口来使用它，这是一个选项。否则去Ricks回答。由于对输入的控制非常严格，正则表达式仅适用于解析HTML。 Some would say it should never be used.

或香草Javascript

var arrP = document.body.getElementsByTagName("p");
var strP = ""
for(var i = 0; i < 3; i++)
  {
    strP += arrP[i].outerHTML;
  }

console.log(strP);

//Or Taking Article body as a string 
var strArticle = "<p>Parra <em>1</em></p><p>Parra <strong>2</strong></p><p>Parra 3</p><p>Parra 4</p>";
var divArticle = document.createElement('div');
arrP = document.body.getElementsByTagName("p");
strP = ""
for(var i = 0; i < 3; i++)
  {
    strP += arrP[i].outerHTML;
  }

console.log(strP);

<p>Parra <em>1</em></p>
<p>Parra <strong>2</strong></p>
<p>Parra 3</p>
<p>Parra 4</p>
<div id="target"></div>

Answer 3

当然，有一行正则表达式，但很难阅读。

var s= '<p>Paragraph 1</p><p>Paragraph <em>2</em></p><p>Paragraph 3</p><p>Paragraph 4</p><p>Paragraph 5</p>';

regex = /(?:\<p\>.*?\<\/p\>){3}/;
s = regex.exec(s);
console.log(s);

正则表达式恰好与一些非捕获组匹配三次。挖掘到非捕获组，我们看到必须转义几个字符，并且我们需要使用惰性量词。我任何一天都会在聪明的正则表达式上走自己的路。

Answer 4

你可以得到段落，然后将它们连在一起直到你达到三个。

var pars = '';

//Get the p tags, go through some of them. Use your favorite library to do this. 
Array.prototype.some.call(document.querySelectorAll('p'), function(current, index) {  
  console.log("This should only go to 2", index);
  pars = pars + ['<p>', current.innerHTML, '</p>'].join(''); 
  return index >= 2; //Counting by zero
});

console.log(pars);

<p>This is one.</p>
<p>This is two.</p>
<p>This is five, er, three.</p>
<p>FOUR</p>
<p>FOUR PLUS ONE</p>
<p>FOUR PLUS TWO</p>

使用javascript收集html中的前3个段落

4 个答案: