We Keep Coding

How can I match a bunch of p tags at the end of an html document with javascript regex?

Here is a sample content:
<p> so so so </p>
<div> whatever</div
<p> another paragraph </p>
<div> forever </div>
<p> first of last </p>
<p> second of last </p>
How can I match the last two paragraphs (or any number of consecutive paragraphs) at the end of the above document?
The match output I want is:
<p> first of last </p>
<p> second of last </p>
I tried /(<p>[\s\S]*?<\/p>[\s]*)$/g, but the lazy matching is not working as expected, it sucks all the p tags in between, and matches from the first opening p tag it encounters up to the end of the document.
Note: there might not be paragraphs at the end at all, the regex should not match if there are no paragraphs at the end.

Here we use regex to match all paragraphs and then take the last two elements of the result array.
let str = `<p> so so so </p>
<div>
whatever
</div
<p> another paragraph </p>
<div> forever </div>
<p> first of last </p>
<p> second of last </p>`
let reg = /<p>[\w\s]*<\/p>/g;
let res = str.match(reg);
console.log(res[res.length-2]);
console.log(res[res.length-1]);

Adding a negative look ahead to make sure nested paragraphs are not matched seems to do the trick:
/(<p>((?!<p>)[\s\S])*?<\/p>[\s]*)+$/g
Would appreciate better suggestions though!

JavaScript to prefix <br> on selected text

I have a textarea field where users enter in the information which then gets stored in a JS variable used to for a POST API request however since there are no line breaks as it renders into HTML, all the text is on one line.
How would I be able to prefix the Affecting, Actions Taken & Next Steps with the HTML <br> tag in JavaScript?
Current output:
Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:
Desired output:
<br>Affecting:
<br>Actions Taken:
<br>Next Steps:
TIA

It looks to me that you want something like this:
console.log(document.getElementById('txt').value.replace(/\n/g, '<br>'))
<textarea id="txt" rows="3" cols="30">Affecting: Lorem Ipsum
Actions Taken: Lorem Ipsum
Next Steps:</textarea>
The text returned in your textarea-value has \n characters in it to mark line endings. In most HTML elements these marks are ignored. You can make them visible in <pre> elements or even in "normal" <divs>s or <p>s if you format them with white-space:pre see here white-space.
In my snippet above I simply replaced each \n by a <br>.

A tag will show as the text of a tag and not render in a textarea, you want newlines.
const val = 'Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:'.replace(/: /g, ': \n');
document.getElementById('txt').value = val;
<textarea id="txt"></textarea>

.text() concatenates strings without spaces when removing html tags

I have a rich text editor on my site and I am trying to create a reliable word counter for it.
Because it's a rich text editor it (potentially) contains html.
This html might be, for example:
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>
To get a reliable word count I am trying to first convert the html to text using:
var value = $('.textEditor').text()
The problem I am facing is the string that is returned seems to concatenate where it removes the html tags and what I am left with is:
this is a sample headingand this is a sample paragraph
as you can see, the words 'heading' 'and' are joined to become 'headingand' which would give me a word count of 10 instead of 11.
any thoughts on how to properly achieve this would be much appreciated :)

You can use innerText:
var value = document.querySelector('.textEditor').innerText
or
var value = $('.textEditor')[0].innerText
console.log(document.body.innerText)
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>

I had a bit of playing around with it and came up with the following:
let value = $('.textEditor').text();
function read(){
alert(value.trim().split(/\s+/).length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>
<button onclick="read()">Read</button>
https://codepen.io/anon/pen/YOazqG?editors=1010
Just trim it and split and you should be fine.

String replace with regex for copied text

While copying text from word file to text editor I am getting html code like,
<p><br></p>
<p> <br></p>
<p> <br></p>
<p> <br></p>
I want to replace above code with empty text like this,
var updated = copyieddata.replace('<p><br></p>', '');
updated = updated.replace('<p> <br></p>', '');
updated = updated.replace('<p> <br></p>', '');
updated = updated.replace('<p> <br></p>', '');
How to implement above functionality by using Regex to avoid repetition.

pedram's answer is probably the easiest way to achieve what you want.
However, if you want to only remove the <p> <br></p> tags and keep all other tags intact, then you need a regular expression that gets all parts of your string that:
Start with <p> and end with </p>
Have only <br> or whitespace in between
The regular expression you need would look like this: /<p>(\s|<br>)*<\/p>/g
This expression looks for any substring that starts with <p>, has zero or more occurrences of either whitespace (\s) or the <br> tag, and ends with </p>.
The /g at the end ensures that if there are multiple occurrences of the pattern in the string, then every pattern is matched. Omitting /g would match only the first occurence of the pattern in your string.
So, your code would look something like this:
var pattern = /<p>(\s|<br>)*<\/p>/g;
var updated = copyieddata.replace(pattern, '');

The simplest way is convert html to text (it remove all additional html tags, and you get clean text) but also you use this topics to learn how format ms word texts.
Jquery Remove MS word format from text area
Clean Microsoft Word Pasted Text using JavaScript
var text = $('#stack');
text.html(text.text());
console.log(text.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stack">
some text
<p><br></p>
<p> <br></p>
<p> <br></p>
<p> <br></p>
some text
</div>
Or you use this to replace all <br> and <p> tags.
$("#stack").html(
$("#stack").html()
.replace(/\<br\>/g, "\n")
.replace(/\<br \/\>/g, "\n")
.replace(/\<p>/g, "\n")
.replace(/\<\/p>/g, "\n")
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stack">
some text
<p><br></p>
<p> <br></p>
<p> <br></p>
<p> <br></p>
some text
</div>
Instead of "\n" you can use nothing like this ""

Returning paragraph breaks with KnockoutJS

I have a list of comments in my database that returns the following entries:
The comment field is a TEXT which includes paragraph breaks. My question is: how do I return these breaks inside Knockout?
<p data-bind="text: comment"></p>
will return
<p data-bind="text: comment">paragraph 1
paragraph 2
paragraph 3</p>
I also tried the html binding, but that only seems to wrap HTML around the returned value, not inside it. So is there a way to add a </p> <p> between the breaks without having to resort to <pre>?
Thanks!

You could use a computed observable to format the text. Here's an example: http://jsfiddle.net/badsyntax/dcVZq/
I split the text on the paragraph character, then join it with opening and closing <p> tags:
'<p>' + this.text().split('¶').join('</p><p>') + '</p>';