How to extract href attribute from link and create a specific pattern of that?

Question

I explain my question with two examples:

Example1:

current string:

var str = 'anything <a href="www.google.com" target="_blank">untitled</a> anything';
//                                                               ^ link-name

I want this string:

var newstr = 'anything www.google.com anything';

Example2:

Current string:

var str = 'anything <a href="www.google.com" target="_blank">any thing else</a> anything';
//                                                                  ^ link-name

I want this string:

var str = 'anything [any thing else](www.google.com) anything';

As you see in the two examples above, untitled is a keyword. I want if link-name is untitled, then create a regular URL of that, but if it isn't, then create a pattern-based URL of that.

Note: pattern = [LinkName](LinkAddress)

How can I do that?

Also here is what I have tried:

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

My code creates a regular URL from all kind of links. How can I add that condition (checking the link-name for being untitled or not) to that?

input string is always in that short form? I think it's not and that is important thing to know. You want to parse whole html document to do this? — Rafał Łużyński, Dec 22 '15 at 12:05

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-22T12:40:04.470

1

I don't understand. What you have done is right. Here are your solutions working perfectly fine:

$(function () {
  var str = 'anything <a href="www.google.com" target="_blank">untitled</a> anything';
  var newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
    return ($(this).text().trim().toLowerCase() == 'untitled') ? $(this).attr('href') : "[" + $(this).text() + "](" + $(this).attr('href') + ")";
  }).end().text();
  $("body").append(newStr + "<br /><br />");
  str = 'anything <a href="www.google.com" target="_blank">any thing else</a> anything';
  newStr = $('<div/>', {html: str}).find("a").replaceWith(function(){
    return ($(this).text().trim().toLowerCase() == 'untitled') ? $(this).attr('href') : "[" + $(this).text() + "](" + $(this).attr('href') + ")";
  }).end().text();
  $("body").append(newStr);
});

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

Updated Code (better version)

$(function () {
  var str = 'anything <a href="www.google.com" target="_blank">untitled</a> anything';
  var newStr = string_it(str);
  $("body").append(newStr + "<br /><br />");
  str = 'anything <a href="www.google.com" target="_blank">any thing else</a> anything';
  newStr = string_it(str);
  $("body").append(newStr);
});

function string_it (str) {
  return $('<div/>', {html: str}).find("a").replaceWith(function(){
    return ($(this).text().trim().toLowerCase() == 'untitled') ? $(this).attr('href') : "[" + $(this).text() + "](" + $(this).attr('href') + ")";
  }).end().text();
}

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

edited Dec 22 '15 at 12:40

answered Dec 22 '15 at 12:10

Praveen Kumar Purushothaman

164,888
24
203
252

Sorry. Because your answer isn't a solution. It is a workaround. You have implemented my two examples as static ..! But I need to a dynamic code which investigates the value of link-name *(being `untitled` keyword or not)* for every string. – Shafizadeh Dec 22 '15 at 12:28
@Shafizadeh Can you explain further please? I am interested in solving it. – Praveen Kumar Purushothaman Dec 22 '15 at 12:31
I want something like this: `if (linkname == 'untitled') {// regular URL} else {// patter-based URL}` – Shafizadeh Dec 22 '15 at 12:33
@Shafizadeh Updated. Kindly look at the above code. `:)` – Praveen Kumar Purushothaman Dec 22 '15 at 12:40
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98696/discussion-between-praveen-kumar-and-shafizadeh). – Praveen Kumar Purushothaman Dec 22 '15 at 12:47
1

Seems good. But I don't know why doesn't work in my real codes. Anyway ok thanks. I accept your solution as my answer and if I faced with a question about it I will ask you later `:-)` – Shafizadeh Dec 22 '15 at 12:47
@Shafizadeh Share the full code, let me see if I can fix. – Praveen Kumar Purushothaman Dec 22 '15 at 12:48

score 1 · Answer 2 · answered Dec 22 '15 at 12:52

1

You just need to check the text content of the element:

var newStr = $('<div/>', {
  html: str
}).find("a").replaceWith(function() {
  var
    href = this.getAttribute('href'),
    text = this.textContent
  ;

  return text === 'untitled' 
         ? href 
         : "[" + text + "](" + href + ")";

}).end().text();

answered Dec 22 '15 at 12:52

Ram

143,282
16
168
197

Oh one thing else, as a consult: I wat to use of this [js-library](https://github.com/jgm/commonmark.js). Now I'm use it in my code like [this](https://jsfiddle.net/vhd8qy6k/2/). What I want to know is, my codes are fine? defining a object in the function is optimized? or I can do that better? *(beforehand) thanks. – Shafizadeh Dec 22 '15 at 13:28
1

@Shafizadeh You are welcome. There is nothing wrong with your code and it's performance is fine for me. However, you can also initialize the instances outside of the function. https://jsfiddle.net/vhd8qy6k/4/. And here is a related question: http://stackoverflow.com/questions/385506/when-is-optimisation-premature – Ram Dec 22 '15 at 13:45

How to extract href attribute from link and create a specific pattern of that?

2 Answers2

Linked