Question

I have to use a proprietary cms blog that renders it’s “summary marker” that contains

1. an elipsis
2. a dynamic changing link (so the link is always different)
3. static text that says: Click here to read more.

This is how the summary marker currently renders on a page:

<p>Content goes here....<a href="example.htm">Click here to read more.</a></p>
<p>More content goes here....<a href="anothertest.htm">Click here to read more.</a></p>
<p>Content goes here....<a href="helloworld.htm">Click here to read more.</a></p>

Meanwhile, I would like to control the summary marker with some jquery so I’m not restricted to its rigid display by:

1. removing each ellipsis
2. appending a class ONLY after the href that contained the ellipsis, so it doesn’t update other links on the page.

This would be the much desired expected result.

<p>Content goes here.<a href="example.htm" class="readmore">Click here to read more.</a></p>
<p>More content goes here.<a href="anothertest.htm" class="readmore">Click here to read more.</a>
<p>Content goes here.<a href="helloworld.htm" class="readmore">Click here to read more.</a>

Thanks so much for your help in advance!

This is what I got, which is bad I know

$("p").html("...").remove:after.attr(".readmore").attr("href"));

Answer 1

$('p').each(function () {
    var textNode = $(this).find('a:last-child').addClass('readmore')[0].previousSibling;

    textNode.textContent = textNode.textContent.replace(/\.{3}\s*$/, '');
});

Here’s the fiddle: http://jsfiddle.net/sH2eA/