SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to insert a start tag, but not an end tag

    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?

    Many thanks,

    Andy

  2. #2
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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:
    Code:
    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.

    That should do the trick.

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi MickeyGinger,

    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:

    Code:
    <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.

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,809
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers felgall - I'm off to investigate text nodes right now...!

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DeathShadow60... no - removing is fine, thanks for your help.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •