Hi - I need to isolate some auto-generated content that is displayed after an end </a> tag, and before a start <div> tag. This text doesn't have any surrounding tags itself, so I need to add some kind of hook to it in order to style it with CSS.
I have tried to use insertAfter to put a <span> after the </a> tag, and then an insertBefore to put a </span> before the <div> tag, but this just results in putting both the start and end <span> tags before the bit of text I want to isolate.
Is there another way of doing this?
Is the section of text you want inside a parent tage of any sort a <div> perhaps? If not you could select the <body> tag and then do a regex on the returned HTML to isolate the text, then put it into a span.
var text = $('body').html();
var regex = new RegExp('regex pattern here', 'ig');
var arr = regex.exec(text);
If your RegExp has brackets surrounding various different sections of the code they would now be stored in $1, $2, $3 etc. So you could now re-build the html with a span tag around the text:
var html = RegExp.$1 + '<span>' + RegExp.$2 + '</span>' + RegExp.$3;
Where RegExp.$1 is all the html of body before the text you want to isolate, RegExp.$2 is the text you want to isolate, and RegExp.$3 is all the html after the isolated text.
That should do the trick.
As an example, this is the sort of text I'm being offered:
<a class="link1" href="#">Post Title</a>
Text I want to isolate
Text I DON'T want to isolate
<a class="link2" href="#">Another link</a>
As you can see, it's the third line down I need to isolate (I actually want to hide it, which rules out applying a style to all, and then unstyling the other parts. The generated code doesn't put the text within any tags, so I can't pick that first line out to style it.
The format is always the same (with the exception of the <div> tag section sometimes not being present).
I did try insertAfter to drop a <span> after the a.link1, and insertBefore to put a </span> before the <div> tag, but didn't work.
What you need to do is to grab the text node from after the </a> and extract it from the page. Create a span node and attach the extracted text node into that and then add the span pack into the page where the text node had been.
Cheers felgall - I'm off to investigate text nodes right now...!
if you can get hold of that anchor (getElementsByClassName inside the parent ID perhaps, or just slap an ID on the anchors) that's a simple single command.
Let's say your 'link1' anchor is pointed to by the variable link1 -- first get the text to remove using nextSibling
That's all there is to it. To delete it, you just remove if from the parentNode of both of them.
Though -- you say hide it, not delete it. In that case I'd probably make a span, copy the textnode in as a child of the span, and then replace the textnode with that span -- slap a unique ID on that span and target away with CSS.
DeathShadow60... no - removing is fine, thanks for your help.