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>"

Answer 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>");

Answer 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>');

Answer 3

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;
        }
    },