[Solved] Removing strings from href using val

JavaScript
1

Hi all

I had a thread sometime back thanks to @James_Hibbard we managed to remove all hrefs from a linksContainer. What I 'd like now is to extend this function so we can remove any strings that match a certain value.

Here is a demo of the existing function which I’d like to extend, displayed below.

$("div.linksContainer").find("a").each(function(){
 var linkText = $(this).text();
 $(this).before(linkText);
 $(this).remove();
});

The strings I’m trying to remove are in the same linksContainer, wondering how we can add something like:

return val.replace('www.example.com', '');

I would like to find any strings that begin with http://www.example.com/… and remove them.

Any guidance example thanks,
Barry

2

Hi Barry,

Could you give a small sample of the HTML you are starting with and then what you would like it to be converted to.

3

That will remove the anchors href. Is that what you wanted? Or to remove them entirely?

@James_Hibbard he has a jsfiddle you might have overlooked.

4

Ah right, so only remove the anchors tags for links pointing to example.com?

5

Thanks Guys!

Ok, as things stand with the function, all < a > are removed, some of these < a > have certain strings as their anchor text. So, if the anchor text matches val = ‘example…’ remove them but leave all other anchor text as is.

Does that make sense?

Example, with the jsfiddle example, if we can remove the string example1. Though example1 will have /9834834 so we need to detect not only example1 but example1/random-value

Remove all
example1.com/9584854
example1.com/5345674
example1.com/4688676

Do not remove
example2.com/42342
example3.com/64565
example4.com/34355

6

Use the contains selector.

Some links:

<div class="linksContainer">
    <a href="www.sitepoint.com">Sitepoint</a><br>
    <a href="www.example1.com">www.example1.com</a><br>
    <a href="www.example2.com">www.example2.com</a><br>
    <a href="www.reddit.com">Reddit</a><br>    
    <a href="www.example1.com">www.example3.com</a><br>
    <a href="www.example2.com">www.example4.com</a>
</div>

and:

$(".linksContainer a[href*='example1']").each(function(){
    var linkText = $(this).text();
    $(this).before(linkText).remove();
});

Is that what you are after?

7

Kind of. I still want to remove all links as before, though the ones that have a matching url I’d also like to remove the string, not just the link. So while we check for links to remove, if any of these links have a matching string, remove everything.

I’ve update the demo. How can we combine this?

8

Like this?

$(".linksContainer a").each(function(){
  var linkText = $(this).text();
  if(linkText.match(/example1/)){
    $(this).remove();
  } else {
    $(this).before(linkText).remove();
  }
});
9

Or slightly neater:

$(".linksContainer a").each(function(){
  var linkText = $(this).text();
  if(!linkText.match(/example1/)){
    $(this).before(linkText)
  }
  $(this).remove();
});
1 Like
10

Thats perfect Pullo!

I didn’t realise this would still remove the links, and then remove the links with the matching text.
Sort of a 2 in 1 function :smile:

Updated demo

Just wondering, previous we had:

$("div.linksContainer").find("a").each(function(){

Now

$(".linksContainer a").each(function(){

What’s the difference, don’t we need .find anymore?

1 Like
11

jQuery uses CSS style selectors, so the latter is better (easier to read and probably faster).
Essentially though, they both do the same thing.

12

Cool. Thanks a lot Pullo!

Update
Just one issue, some of these links are wrapped inside another element < p > is it possible to remove the container aswell?
Updated demo show what I mean.

Barry

13

Make sure that there are no trailing <br /> elements inside the <p> elements.

<p><a href="www.example1.com">www.example1.com</a><br /></p>

should be:

<p><a href="www.example1.com">www.example1.com</a></p>

Then alter your script, thus:

$("div.linksContainer a").each(function(){
  var linkText = $(this).text();
  if(!linkText.match(/example1/)){
    $(this).before(linkText)
  }
  $(this).remove();
});
$( 'p:empty' ).remove();
14

Perfect, thats what I was looking for :sunglasses:

Thanks again, Barry

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.