CODEWITHSUNDEEP
javascriptjquery
Abhishek B.
Abhishek B.

Reputation: 5202

Replace # keyword from to the strings from the specified <div></div> using Jquery

I have problem to replace keyword from input string

I have 

<div id="Wrap">
<span class="common"><div id="main0"> to test it #sky </div></span>
</div>

I want to like this :

<div id="Wrap">
<span class="common">
<div id="main0"> to test <a href="http://mysite.com/search?q=#sky">#sky</a>  </div>
</span>
</div>

I tried with replace in jquery but not getting ... I finding solution in jquery or javascript Please help me...

Upvotes: 1

Views: 138

Answers (3)

alex
alex

Reputation: 490333

You could do it quick and easy with some caveats...

$('#element').html(function(i, html) {
   return html.replace(/#\w+/g, '<a href="http://mysite.com/search?q=$&">$&</a>';
});

This isn't the best way to do it as it may mangle things such as title attributes.

The more robust and guaranteed to only operate on text nodes...

var searchText = function(parentNode, regex, callback) {

   var node = parentNode.firstChild;

   do {

       if (node.nodeType == 1) {

           var tag = node.tagName.toLowerCase();

           if (tag == 'script' || tag == 'style') {
               continue;
           }

           searchText.call(this, node, regex, callback);

       } else if (node.nodeType == 3) {
           while (true) {

               // Does this node have a match? If not, break and return. 
               if ( ! regex.test(node.data)) {
                   break;
               } 

               node.data.replace(regex, function(match) {

                   var args = $.makeArray(arguments),
                       offset = args[args.length - 2],
                       newTextNode = node.splitText(offset);

                   callback.apply(window, [node].concat(args));
                   newTextNode.data = newTextNode.data.substr(match.length);
                   node = newTextNode;

               });
           }
       }
   } while (node = node.nextSibling);
}

searchText($('#element')[0], /#\w+/, function(node, match) {
    var link = $('<a />')[0];
    link.href = 'http://mysite.com/search?q=' + match.substr(1);                                    
    link.appendChild(document.createTextNode(match));
    node.parentNode.insertBefore(link, node.nextSibling);
});

Upvotes: 1

Matthew Abbott
Matthew Abbott

Reputation: 61599

Ensure your use the /g switch on your expression, e.g.:

var match = /(#\w+)/g;
var text = $("#main0").text();
var result = text.replace(match, "<a href=\"http://mysite.com/search?q=$1\">$1</a>");

$("#main0").text(result);

The /g switch ensures it replaces all matches, not just the first instance.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816600

Something like:

$('#main0').html($('#main0').html().replace(/(#\w+)/g, '<a href="http://mysite.com/search?q=$1">$1</a>'));

Use replace() (which is just a normal JS function btw) with a regular expression, that matches # and word characters. $1 is a backreference to the content of the first capture group ().

DEMO

Upvotes: 1

Related Questions