How to replace text with links using javascript?

Question

This is what I do to take out texts from a html usng Jquery:

$(".text").each(function(){

        var texts = items[textCount]['data']['title'];
        $(this).text(texts);
         textCount = textCount + 1;
      });

My problem if I want the texts to be a url, then it doesn't show up as link but also a string added to the texts variable. How do I show a link? How can add it as a href to the texts?

Output should be something like this:

Text + url

and not text being linked as url: "<a href=\""+link+"\">"+texts+"</a>"

lucuma · Accepted Answer · 2013-04-22 01:17:58Z

2

You can make each element with class=text a link like this which assumes you have some kind of element that you are going to wrap with a hyperlink. I'm not 100% sure this is what you are looking for.

$('.text').wrap('<a href="http://yourlinkhere.com"></a>');

answered Apr 22, 2013 at 1:17

lucuma

18.3k4 gold badges68 silver badges95 bronze badges

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

Comments

Starx · Accepted Answer · 2013-04-22 01:17:55Z

1

Using .attr() function like this.

$(this).attr("href", "your link");

But this will only work, if you have an anchor tag if not you can create an anchor tag on the fly.

$(this).html("<a href=\""+link+"\">"+texts+"</a>");

answered Apr 22, 2013 at 1:17

Starx

79.3k50 gold badges187 silver badges266 bronze badges

4 Comments

Hick Over a year ago

This creates a link of a text. I wanted something like this: texts + link and not linking of the text.

Starx Over a year ago

Update your question with the required HTML output.

Hick Over a year ago

Have updated it a bit. Not sure if that's exactly what you want.

Hick Over a year ago

Figured it out myself. Thanks!

PSL · Accepted Answer · 2013-04-22 01:32:03Z

1

You can just do. Note:- this is more efficient than attr() as you are directly dealing with the object property.

this.href="yoururl"

You do not have to go through the followng jquery code which get called during attr inorder to just set the href attribute.

Jquery attr function

attr: function( elem, name, value, pass ) {
        var nType = elem.nodeType;

        // don't get/set attributes on text, comment and attribute nodes
        if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {
            return undefined;
        }

        if ( pass && name in jQuery.attrFn ) {
            return jQuery( elem )[ name ]( value );
        }

        // Fallback to prop when attributes are not supported
        if ( !("getAttribute" in elem) ) {
            return jQuery.prop( elem, name, value );
        }

        var ret, hooks,
            notxml = nType !== 1 || !jQuery.isXMLDoc( elem );

        // Normalize the name if needed
        if ( notxml ) {
            name = jQuery.attrFix[ name ] || name;

            hooks = jQuery.attrHooks[ name ];

            if ( !hooks ) {
                // Use boolHook for boolean attributes
                if ( rboolean.test( name ) ) {
                    hooks = boolHook;

                // Use nodeHook if available( IE6/7 )
                } else if ( nodeHook ) {
                    hooks = nodeHook;
                }
            }
        }

        if ( value !== undefined ) {

            if ( value === null ) {
                jQuery.removeAttr( elem, name );
                return undefined;

            } else if ( hooks && "set" in hooks && notxml && (ret = hooks.set( elem, value, name )) !== undefined ) {
                return ret;

            } else {
                elem.setAttribute( name, "" + value );
                return value;
            }

        } else if ( hooks && "get" in hooks && notxml && (ret = hooks.get( elem, name )) !== null ) {
            return ret;

        } else {

            ret = elem.getAttribute( name );

            // Non-existent attributes return null, we normalize to undefined
            return ret === null ?
                undefined :
                ret;
        }
    },

edited Apr 22, 2013 at 1:32

answered Apr 22, 2013 at 1:19

PSL

124k21 gold badges257 silver badges243 bronze badges

2 Comments

Hick Over a year ago

But you are assuming that the attr exists.

PSL Over a year ago

@Hick Its just dealing as a javascript object. If href doesn't exist this will add href property. was this your question? And also for href attribute evenif you dont mention it in the html tag, the object will have href attribute always. You can check it yourself and please correct me if i am wrong...

Collectives™ on Stack Overflow

How to replace text with links using javascript?

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related