How to select href attribute from link using jquery?

Question

I have a string like this:

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">...www.example.com/clas</a> </span> anything';

I want this output:

var newstr: 'anything http://www.example.com/classname/methodname/arg1/arg2 anything';

How can I do that? Actually I almost can do that using multiple str_replace(). But I want to know how can I do that using regex?

str.str_replace('<span><a href="', '');
str.str_replace('" target="_blank">', '');
str.str_replace('</a> </span> ', '');

// output:
anything http://www.example.com/classname/methodname/arg1/arg2...www.example.com/clas anything

Well, As you see, I just can't remove ...www.example.com/clas in the my output.

Note: anything in the example could be any words/sentences. Btw, in reality there is Persian characters.

---

Edit1: Here is an example:

I want to replace this:

This <span><a href="www.example.com/classname/methodname/arg1/arg2/" target = "_blank"> ... www.example.com/clas</a> </span> is very good.

With this:

This www.example.com/classname/methodname/arg1/arg2/ is very good.

---

Edit2: Also I need to the value of that link. Something like this pattern:

[LinkName](LinkAddress)

Note: Just I want to create the above patter if the value of that link don't be "untitled".

Example1:

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">website name</a> </span> anything';

I want this:

var newstr: 'anything [website name](http://www.example.com/classname/methodname/arg1/arg2 anything)';

Example2:

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">untitled</a> </span> anything';

I want this:

var newstr: 'anything http://www.example.com/classname/methodname/arg1/arg2 anything';

Answer 1

You can wrap str inside DOM element, find any anchor tag, replace it with its own href attribute and then return the new string:

var newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
  return $(this).attr('href'); // this.href would give absolute path
}).end().text();

var str = 'anything <span><a href="http://www.example.com/classname/methodname/arg1/arg2" target="_blank">...www.example.com/clas</a> </span> anything';

var newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
  return $(this).attr('href');
}).end().text();
console.log(newStr);
$('body').append(newStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

If your text always varies, you should stick to Gen4tiks answer. However, if the rules for your sentences are always the way you described above, you could use the regex.split method explained here and define a regex that fits your needs. The following is a working but pretty stupid regex that accomplishes your needs, but is very useless for any other use-case. I just use it as an explanation how you can use the regexes:

var split = str.split(split(/(<\/*[a-zA-Z0-9=\\]+>)|(href=")|(target)/)
//split: ["anything interesting ", "<span>", undefined, undefined, "<a ", undefined, "href="", undefined, "http://www.example.com/classname/methodname/arg1/arg2" ", undefined, undefined, "target", "="_blank">...www.example.com/clas", "</a>", undefined, undefined, " ", "</span>", undefined, undefined, " anything else"]
var output = match[0] + match[(match.indexOf('href="')+2)] + match[match.length-1]
//output: "anything interesting http://www.example.com/classname/methodname/arg1/arg2"  anything else"

• the / defines the start and end of your regex
• the | defines the different option for when a split should take place
• the <\/*[a-zA-Z0-9=\\]+> splits for every html-tag
• the (href=") is used to find the correct index later (for the link you want to display)
• the target splits the string at the position of the "target" attribute of your html (you dont want to have that in your output)

Hope that helps!