CODEWITHSUNDEEP
javascriptjqueryhtml
Samuel Charpentier
Samuel Charpentier

Reputation: 609

Select the last line of a paragraph using Javascript

I'm looking to create an animation effect on the last line of a paragraph which is wrapped in a div. It has some links in them so it looks a little like this:

<div id="wrapper"><p>Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Integer eu dui et erat</p></div>

So where ever the last line break happens on page load, I want to select the last line with a span to give it the effect.

I would love not to have to use jQuery even though I may need to...

Upvotes: 0

Views: 2756

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

while you tagged jquery .. this is a jquery code .. but be sure to include jquery first

var parText = $('#wrapper p').text(); // get text of p
var parSplit = parText.split("\n"); // split text by \n
var lastLine = parSplit[parSplit.length-1]; // get last line
parText.replace(lastLine , ''); // replace last line with nothing
$('#wrapper p').append('<span>'+lastLine+'</span>'); // append the last line with `<span>lastline</span>` and give it a style you need

DEMO

another DEMO with slideDown effect

Upvotes: 2

guest271314
guest271314

Reputation: 1

Try using .textContent String.prototype.split() with RegExp /\n/ , Array.prototype.slice() with parameter -1 to select last new line character , String.prototype.replace() to replace selected text within div with span element having selected text

var div = document.getElementById("wrapper");
var text = div.childNodes[0].childNodes[0].textContent.split(/\n/).slice(-1)[0];
div.innerHTML = div.innerHTML.replace(new RegExp("("+text+")"), "<span>$1</span>")
div {
  white-space:pre;
}

div span {
  font-size:18px;
  color: purple;
}
<div id="wrapper"><p>Lorem ipsum dolor sit amet,
 consectetur adipiscing elit. Integer eu dui et erat</p></div>

Upvotes: 0

Related Questions