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 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.
Are you using javascript or jQuery? I’m more of a jQuery guy, so I can’t really help you with the javascript, but with jQuery you could do something like this:
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;
$('body').html(html);
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.
Not so sure I can pick out an expression to replace… (I’m also only a casual JavaScript user, so there’ll be a limit to my comprehension/ability).
As an example, this is the sort of text I’m being offered:
<li class="item">
<a class="link1" href="#">Post Title</a>
Text I want to isolate
<div>Other content</div>
Text I DON'T want to isolate
<a class="link2" href="#">Another link</a>
</li>
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.
The start and end tag don’t exist in isolation - they always come as a matched pair - if an end tag is left out in HTML then the browser adds it to the DOM. There is no such thing as single tags in the JavaScript DOM.
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.
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
var textToRemove=link1.nextSibling;
That’s all there is to it. To delete it, you just remove if from the parentNode of both of them.
link1.parentNode.removeChild(textToRemove);
Pretty simple stuff… though isolating that anchor may be the hard part – I’m assuming you can’t actually modify the code/output? I mean, this really isn’t a job for javascript and looks more like a job for editing whatever is outputting that markup.
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.