Javascript innerHTML code generates unexplained line-breaks in IE

Discussion in 'Javascript' started by John Ca, Oct 7, 2009.

  1. John Ca

    John Ca Guest

    Hi Everyone!

    I'm posting this as a follow up message on my previously started
    thread here:
    http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/63fff03661714519?hl=en

    Unfortunately since that thread went quite a bit off-topic, I'm
    starting this new thread instead!

    Anyway, I'm experiencing a very strange problem with IE6... in my
    original post I was trying to figure out how to build a function which
    will work both with IE & FF, the purpose of which is to highlight
    certain keywords in the page's paragraphs, and turn them into
    hyperlinks!

    RobG was gracious enough to provide me with a working function which
    achieves just that, and works both with IE and FF (the function I was
    using before that worked only in FF).

    Here is the function provided by RobG:

    function create_links() {

    var keywords = ['Keyword1','Keyword2','Keyword3','Keyword4'],
    p,
    pCollection = document.getElementsByTagName("p"),
    re,
    word;

    for (var i=0, iLen=pCollection.length; i<iLen; i++) {
    p = pCollection;

    for (var j=0, jLen=keywords.length; j<jLen; j++) {
    word = keywords[j];
    re = new RegExp('\\b' + word + '\\b','g');
    p.innerHTML = p.innerHTML.replace(re,
    '<a href="http://www.mysite.com">' + word + '</a>');
    }
    }

    }


    As expected the function now works perfectly in both IE & FF, however
    there is now a new and very strange problem!!!

    Whenever the function executes in IE, it also adds some kind of weird
    line breaks just after each paragraph that it modifies... creating
    about 2 lines worth of blank space between that paragraph and the next
    element on the page!!! For the life of me I cannot figure out what can
    possibly be causing this...

    Unfortunately since IE6 doesn't have the option of dynamically showing
    the page source (unlike FF which has the option to "View selection
    source"), I don't really know what it's adding after the <p> elements
    specifically! When I select those "empty lines" on the page it's like
    there's an empty character (" ") there, and when I copy-paste it into
    notepad it goes down one line, so I assume it's a line-break
    character.

    Also, since I only have IE6 installed on my machine, I didn't have a
    chance to test it with IE7, so I don't know if it applies to all
    versions of IE or just IE6, but nonetheless it's extremely strange!

    If anyone has any ideas as to what might be causing this, and how to
    fix this I would greatly appreciate your help!!!

    I'm calling the function in an "onload" event in the body tag as such:
    <body onload="create_links();">

    If I left out any important information please let me know!

    Thanks,
    John
    John Ca, Oct 7, 2009
    #1
    1. Advertising

  2. John Ca

    John Ca Guest

    Anyone at all?
    John Ca, Oct 8, 2009
    #2
    1. Advertising

  3. John Ca

    Evertjan. Guest

    John Ca wrote on 09 okt 2009 in comp.lang.javascript:

    > Anyone at all?


    What are you talking about?

    [please always quote on usenet]

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
    Evertjan., Oct 8, 2009
    #3
  4. John Ca

    John Ca Guest

    On Oct 9, 12:22 am, Stefan Weiss <> wrote:
    > On 07/10/09 21:40, John Ca wrote:
    >
    > > I'm posting this as a follow up message on my previously started
    > > thread here:
    > >http://groups.google.com/group/comp.lang.javascript/browse_thread/thr...

    > ..
    > > Anyway, I'm experiencing a very strange problem with IE6... in my
    > > original post I was trying to figure out how to build a function which
    > > will work both with IE & FF, the purpose of which is to highlight
    > > certain keywords in the page's paragraphs, and turn them into
    > > hyperlinks!

    >
    > I just tested the function you posted with IE6 and a dummy HTML file,
    > and I can't see the effect you described. It's possible that something
    > else on the page (custom stylesheet?) is interfering. Could you post a
    > link to a page which demonstrates this problem, or (if the page is short
    > enough), post the complete HTML?
    >
    > cheers,
    > stefan


    Hey Stefan,

    Thanks for your willingness to help! The thing is, and this is a bit
    awkward, but the blog for which I've been hired to do this for is one
    of an *adult* nature, so there's some sexually explicit material on
    there... if you don't mind that then I'll be happy to send you the
    link; if it's a problem then i'll do my best to recreate the code
    without all the "naughty" bits in it...

    Thanks,
    John
    John Ca, Oct 9, 2009
    #4
  5. Re: Javascript innerHTML code generates unexplained line-breaks inIE

    John Ca wrote:
    > On Oct 9, 12:22 am, Stefan Weiss <> wrote:
    >> On 07/10/09 21:40, John Ca wrote:
    >>
    >>> I'm posting this as a follow up message on my previously started
    >>> thread here:
    >>> http://groups.google.com/group/comp.lang.javascript/browse_thread/thr...

    >> ..
    >>> Anyway, I'm experiencing a very strange problem with IE6... in my
    >>> original post I was trying to figure out how to build a function which
    >>> will work both with IE & FF, the purpose of which is to highlight
    >>> certain keywords in the page's paragraphs, and turn them into
    >>> hyperlinks!

    >> I just tested the function you posted with IE6 and a dummy HTML file,
    >> and I can't see the effect you described. It's possible that something
    >> else on the page (custom stylesheet?) is interfering. Could you post a
    >> link to a page which demonstrates this problem, or (if the page is short
    >> enough), post the complete HTML?
    >>
    >> cheers,
    >> stefan

    >
    > Hey Stefan,
    >


    I'm not Stefan, but replying anyway.

    > Thanks for your willingness to help! The thing is, and this is a bit
    > awkward, but the blog for which I've been hired to do this for is one
    > of an *adult* nature, so there's some sexually explicit material on
    > there... if you don't mind that then I'll be happy to send you the
    > link; if it's a problem then i'll do my best to recreate the code
    > without all the "naughty" bits in it...
    >


    Please post a reduced test case. (Remove all the BBW, etc).

    :-D
    --
    Garrett
    comp.lang.javascript FAQ: http://jibbering.com/faq/
    Garrett Smith, Oct 10, 2009
    #5
  6. John Ca

    John Ca Guest

    On Oct 10, 1:26 pm, Stefan Weiss <> wrote:
    > On 10/10/09 07:42, Garrett Smith wrote:
    >
    > > John Ca wrote:
    > >> On Oct 9, 12:22 am, Stefan Weiss <> wrote:
    > >>> I just tested the function you posted with IE6 and a dummy HTML file,
    > >>> and I can't see the effect you described. It's possible that something
    > >>> else on the page (custom stylesheet?) is interfering. Could you post a
    > >>> link to a page which demonstrates this problem, or (if the page is short
    > >>> enough), post the complete HTML?

    >
    > >>> cheers,
    > >>> stefan

    >
    > >> Hey Stefan,

    >
    > > I'm not Stefan, but replying anyway.

    >
    > I am Stefan, and I...
    >
    > >> Thanks for your willingness to help! The thing is, and this is a bit
    > >> awkward, but the blog for which I've been hired to do this for is one
    > >> of an *adult* nature, so there's some sexually explicit material on
    > >> there... if you don't mind that then I'll be happy to send you the
    > >> link; if it's a problem then i'll do my best to recreate the code
    > >> without all the "naughty" bits in it...

    >
    > > Please post a reduced test case. (Remove all the BBW, etc).

    >
    > ...agree. I don't mind seeing the "naughty bits", but since this is a
    > blog, there's going to be a lot of other stuff (stylesheets, other
    > scripts/libraries, weird markup) which could possibly influence your
    > script's behavior. The create_links() function works fine on my
    > bare-bones test page; it apparently doesn't work on the blog, so I
    > assume that something else on that page triggers the layout problem.
    > Probably not the BBW, though :)
    >
    > cheers,
    > stefan


    lol yeah I figured it probably had to be something else on the blog
    that's causing this if the function works fine on a bare-bones test
    page, but nonetheless I still have no idea what it could possibly
    be... the blog itself is pretty straight forward; other than 2 other
    simple "document.write" javascripts on it, the script at hand is
    really the main one. Also I can't possibly imagine how the CSS file
    could be causing this...

    I don't expect you to do all the work for me of course, but if you
    could at least have a look and witness this strange phenomena for
    yourselves, maybe that will give you some possible leads I could look
    into?

    Here's the blog's address (It's in Hebrew):
    http://www.sexhinamx.com/

    If you load it from firefox you'll see the function kicking in and
    some keywords get highlighted and turned into hyperlinks. The same
    thing happens when you load it from IE, only as the function kicks in,
    you'll also see these unexplained line-breaks appearing after each
    paragraph... really odd!

    Thanks again!
    John Ca, Oct 10, 2009
    #6
  7. John Ca

    wilq Guest

    > Unfortunately since IE6 doesn't have the option of dynamically showing
    > the page source (unlike FF which has the option to "View selection
    > source"), I don't really know what it's adding after the <p> elements
    > specifically!


    Start using http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Toolbar
    and there will be no more magic with HTML elements in IE :)
    wilq, Oct 12, 2009
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. bernadou

    Force multi line field value to output with line breaks?

    bernadou, Jan 22, 2006, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    344
    bernadou
    Jan 23, 2006
  2. Marek Stepanek
    Replies:
    12
    Views:
    399
    Peter J. Holzer
    Sep 2, 2006
  3. sonic
    Replies:
    5
    Views:
    267
    Randy Webb
    Jul 11, 2006
  4. Fredyy
    Replies:
    3
    Views:
    125
    Fredyy
    Jul 14, 2006
  5. Replies:
    22
    Views:
    560
    Eric B. Bednarz
    Mar 21, 2008
Loading...

Share This Page