How to Add rel='sponsored' to Links Containing a Specific String in jQuery

Описание: Learn how to effectively check if a link contains a specific string and add the `rel='sponsored'` attribute to it using jQuery. Simplify your coding with this easy-to-follow guide!
---
This video is based on the question https://stackoverflow.com/q/69283171/ asked by the user 'Paolo Battiloro' ( https://stackoverflow.com/u/11877517/ ) and on the answer https://stackoverflow.com/a/69285650/ provided by the user 'psiodrake' ( https://stackoverflow.com/u/16975831/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: check if the link contains a string and add the rel='sponsored' attribute to it

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Adding the rel='sponsored' Attribute to Links in jQuery

When working on web projects, you often need to manage links dynamically based on certain criteria. A common requirement is to add specific attributes to links that contain certain strings. In this guide, we’ll tackle a specific problem: how to check if a link contains the string dnlink and then add the rel='sponsored' attribute to it using jQuery.

The Problem

You might find yourself in a scenario where you need to modify a link's attributes based on its URL. For example, in your project, you want to add a rel='sponsored' attribute to all links that include the string dnlink. Here's a code snippet you might have tried, which didn't work as expected:

[[See Video to Reveal this Text or Code Snippet]]

While the logic appears sound, you might encounter issues because of how the variable link is declared and used.

The Solution

Key Correction

The main issue in the original code stems from how the variable link is declared. To avoid unintended behaviors and ensure clarity in your code, it's best practice to declare variables using const or let. This makes scope management easier and helps prevent accidental global variable declarations.

Here’s the corrected code snippet:

[[See Video to Reveal this Text or Code Snippet]]

Full Implementation

To see this in action, we can use a simple HTML structure alongside the jQuery code. Below is a complete example:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Code

Link Selection: The $("a") selector allows you to access all the anchor tags on your webpage.

Iterating Over Links: The .each() function iterates over each link.

Getting the href attribute: The $(this).attr("href") retrieves the href attribute value of the current link.

Condition Check: The link.includes("dnlink") checks if the string dnlink is part of the URL.

Adding the Attribute: If the link contains the string, the $(this).attr("rel", "sponsored") line adds the desired attribute.

Conclusion

With this solution, you now have a clearer understanding of how to check for a specific string within links and modify them as necessary. By making your code robust with proper variable declarations, you’ll avoid errors and make your code cleaner and more maintainable. Happy coding!