(jQuery) Find and Replace specific text

Question

I've got the following HTML code, which essentially pertains to a post where I announce something in just a few lines, end it with "[...]", and add a "Read more" link-button at the bottom. When this button is clicked, additional content that's hidden will fadeIn as the button disappears, leaving visible the introductory text and the one that was hidden -- simple enough. Now, I've already written the code for this, but the complication comes when I try to also remove that "[...]" (from the post where the click button happened) that I included in the sneak peek. Here's the HTML:

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span id="revealer" class="button"><a href="#">Read more</a></span>
</div>

Classes "entry" and "button" belong to my CSS file, while "slide-content" belongs to my .js file to control the fadeIn effect. The ID "revealer" also belongs to the .js file for the same purpose. This HTML is wrapped in a div tag with a class of "box". This is the format that each post follows, exactly the same format with the same HTML elements -- every time an announcement needs to be made, it's just a matter of putting the content between the paragraph tags and publish. Here is where my problem comes in, since I can't find a way to remove the "[...]" only in the post where the button has been clicked. I tried doing the following but it resulted in the deletion of all "[...]" throughout multiple posts:

$('.entry p').each(function() {
    var textReplace = $(this).text();
    $(this).text(textReplace.replace('[...]', '')); 
});

Summary:

I need to remove the "[...]" text only from the post where the user has clicked on (the "Read more" button). The idea is to have this removed while at the same time the hidden content fades in.
I've been able to accomplish the above but for all instances of "[...]". I need to sophisticate my selection by modifying my jQuery code or the HTML.
Option 3 is to get rid of this "[...]", but I would like to leave it there to let the user know she has more content to read, and I would like to have that "Read more" button in all posts for consistency.

~Thanks in advance!

+1 for nice question formatting. Welcome to SO.

elclanrs
– elclanrs

2012-04-13 01:12:06 +00:00
Commented Apr 13, 2012 at 1:12 — elclanrs
– elclanrs, Commented Apr 13, 2012 at 1:12
I think you mean "sneak peek".

Tim Down
– Tim Down

2012-04-13 09:02:56 +00:00
Commented Apr 13, 2012 at 9:02 — Tim Down
– Tim Down, Commented Apr 13, 2012 at 9:02

icyrock.com · Accepted Answer · 2012-04-13 01:22:31Z

1

First, you mention you have multiple of these. In that case, this:

<span id="revealer" class="button"><a href="#">Read more</a></span>

will not work. id attribute has to be unique per document, i.e. you can have at most one element with the specific id value.

If you make your HTML (for each of the blocks) like this:

<div class="entry">
    <p>Welcome. Talk about something briefly and click below for more. [...]</p>    

    <div class="slide-content">
        <p>Hidden content.</p>
    </div>
    <span class="revealer button"><a href="#">Read more</a></span>
</div>

and your JS like this:

function replace(fromp) {
    var textReplace = fromp.text();
    fromp.text(textReplace.replace('[...]', ''));
}

$('.revealer').click(function() {
   var fromp = $(this).siblings().eq(0);
   replace(fromp);
});

it will work properly. Working example:

http://jsfiddle.net/G4t7Q/

Hope this helps.

answered Apr 13, 2012 at 1:22

icyrock.com

28.7k4 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

AlexMA Over a year ago

This is a good answer, though doesn't it place restrictions on later markup reorganization?

icyrock.com Over a year ago

@AlexMA Sure, it definitively places restrictions - p has to be the first element. I was mostly showing how to do this with one p instead of all of them. Where they are is a secondary issue - a valid point, but this cannot be solved in general (e.g. you can have multiple ps - which one to choose and why that one instead of others, etc.) is up to the OP.

Treadstone Over a year ago

Thank you very much -- this is exactly what I was looking for. You are a rockstar. Thumbs up, and cheers!

AlexMA · Accepted Answer · 2012-04-13 02:47:30Z

0

When you run your page initialization script, you could use jquery to select all of the posts and all of the remove buttons and link them up via their click event. I've created a JSFiddle example, but here's the jist of it:

var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
    $(removers[i]).click( { post: posts[i] },
        function(event) {
            var textReplace = $(event.data.post).text()
            $(event.data.post).text(textReplace.replace('[...]', ''))
        }
    )
}

This is a simplified example; it assumes the posts and buttons are sorted in the markup.

edited Apr 13, 2012 at 2:47

answered Apr 13, 2012 at 1:31

AlexMA

10.3k8 gold badges46 silver badges67 bronze badges

1 Comment

Treadstone Over a year ago

Thanks for this, sir. Right now this system that I am coding is very simple and still hasn't reached the point where posts automatically are given a specific ID. However, later on it will, so I'm going to keep your post in mind for when the time comes. Cheers!

Collectives™ on Stack Overflow

(jQuery) Find and Replace specific text

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related