Enhancing a Class using Jquery

Question

Enhancing a Class using Jquery

It might sound strange, but I have a full URL as a class for some of my HTML elements. Obviously, this doesn't work for CSS purposes. What I want to achieve is to remove everything except the page slug. Here's an example of what I currently have:

<li class="menu-item http://example.com/page-link/">some code</li>

What I would like in terms of HTML output is this:

<li class="menu-item page-link">some code</li>

I thought about using the .replace method to get rid of "http://example.com/", but I'm unsure how to remove the trailing slash and the beginning of the URL. Here's my idea:

var strclass = $(li[class*=http://example.com/]).attr('class').match(/\bhttp://example.com/.+?\b/);
var newclass = strclass.replace("http://example.com/", "").replace("/", "");

Any assistance would be greatly appreciated. If the code above seems off-track, please point me in the right direction with helpful resources.

******I'm exploring new methods and seeking additional feedback!******

This is the updated code that combines some great suggestions:

if(li.hasClass('menu-item')) {
   var strclass = $('li.menu-item').attr('class');
   var newclass = strclass.split(" ")[1].split("/")[3];
   $(".menu-item").removeClass("http://example.com/" + strclass + "/").addClass(newclass);
}

The problem I am encountering now lies in the third line within the if statement where I try to replace the old class with the full URL with the new class containing only the page slug. If anyone has a solution or alternative approach, please share. Thank you all for your efforts and quick responses!

javascript jquery css

Answer 1

Answer №1

This code snippet accomplishes the task at hand:

var elements = document.querySelectorAll("li.menu-item");
alert(elements.length + " items with classes that require modification have been found.");

for(var i = 0 ; i < elements.length; ++i){
   var classes = elements[i].className.split(" ");
   elements[i].className = classes[0] + " " + classes[1].split("/")[3];
   alert("The new class attribute value is: " + elements[i].className);
}

.menu-item { font-family:Arial; font-size:1.5em; }
.page-link { background-color: red; }
.something {background-color: green;}
.go-somewhere {background-color: yellow; }

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/something/">some code</li>
<li class="http://example.com/go-somewhere/">some code</li>
<li class="menu-item http://example.com/go-somewhere/">some code</li>

Answer 2

This code snippet accomplishes the task at hand:

var elements = document.querySelectorAll("li.menu-item");
alert(elements.length + " items with classes that require modification have been found.");

for(var i = 0 ; i < elements.length; ++i){
   var classes = elements[i].className.split(" ");
   elements[i].className = classes[0] + " " + classes[1].split("/")[3];
   alert("The new class attribute value is: " + elements[i].className);
}

.menu-item { font-family:Arial; font-size:1.5em; }
.page-link { background-color: red; }
.something {background-color: green;}
.go-somewhere {background-color: yellow; }

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/something/">some code</li>
<li class="http://example.com/go-somewhere/">some code</li>
<li class="menu-item http://example.com/go-somewhere/">some code</li>

Answer 3

Answer №2

let originalString = "menu-item http://example.com/page-link/";
let newString = originalString.replace("http\:\/\/.+\/(.+)\/", "$1");

It might not address all your issues, but it seems like you're being too specific. Try using a more general pattern to replace that portion of the class string.

If you prefer a less greedy approach, only extracting the last folder:

let newString = originalString.replace("http\:\/\/.+\/([^\/]+)\/", "$1");

Answer 4

let originalString = "menu-item http://example.com/page-link/";
let newString = originalString.replace("http\:\/\/.+\/(.+)\/", "$1");

It might not address all your issues, but it seems like you're being too specific. Try using a more general pattern to replace that portion of the class string.

If you prefer a less greedy approach, only extracting the last folder:

let newString = originalString.replace("http\:\/\/.+\/([^\/]+)\/", "$1");

Answer 5

Answer №3

One way to create an array is by using forward slashes:

const words = sentence.split("/");

Next, you can find the specific word that represents either the end or second-to-last item in the array, depending on whether there is a closing slash.

if (words[words.length - 1]) {
  chosenWord = words[words.length - 1];
} else {
  chosenWord = words[words.length - 2];
}

Answer 6

One way to create an array is by using forward slashes:

const words = sentence.split("/");

Next, you can find the specific word that represents either the end or second-to-last item in the array, depending on whether there is a closing slash.

if (words[words.length - 1]) {
  chosenWord = words[words.length - 1];
} else {
  chosenWord = words[words.length - 2];
}

Answer 7

Answer №4

If I were to handle this situation, I would utilize a regex pattern within a replace function like so: /.*?([^/]+)\/?$/

$('li[class*="http://"]').each(function(){
  var pattern = new RegExp('^https?://');
  var classes = this.className.split(' ');
  for(var i = 0, len = classes.length; i < len; i++) {
    if(pattern.test(classes[i])) {
      classes[i] = classes[i].replace(/.*?([^/]+)\/?$/, '$1');
    }
  }
  this.className = classes.join(' ');
});

.page-link {color: green;}

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

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>

It is important to note that the regex in my solution accounts for both http and https protocols (excluding the //example.com/whatever/ syntax and relative urls), whereas the jQuery selector specifically targets only the http linked list items. It may be beneficial to create a separate class designation for this behavior, such as linked-list-item or a similar identifier.

Answer 8

If I were to handle this situation, I would utilize a regex pattern within a replace function like so: /.*?([^/]+)\/?$/

$('li[class*="http://"]').each(function(){
  var pattern = new RegExp('^https?://');
  var classes = this.className.split(' ');
  for(var i = 0, len = classes.length; i < len; i++) {
    if(pattern.test(classes[i])) {
      classes[i] = classes[i].replace(/.*?([^/]+)\/?$/, '$1');
    }
  }
  this.className = classes.join(' ');
});

.page-link {color: green;}

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

<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>
<li class="menu-item http://example.com/page-link/">some code</li>

It is important to note that the regex in my solution accounts for both http and https protocols (excluding the //example.com/whatever/ syntax and relative urls), whereas the jQuery selector specifically targets only the http linked list items. It may be beneficial to create a separate class designation for this behavior, such as linked-list-item or a similar identifier.

Enhancing a Class using Jquery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Move a Java application from a trial SAP HCP to a complete SAP HCP membership

Determine the distance between two objects and the camera using Three.js

How to attach event to a button that is generated dynamically - Is live() the way

Are YUI CSS Fonts affected by %-based sizing when used in nested elements?

Tips for customizing the appearance of buttons in a JavaScript bxSlider

inject spinner during the call and verify status post-call

Identifying the category of a value through a conditional check on another value

Creating a Mongoose Schema for implementing the delete functionality

Creating an innovative webpage that effectively showcases 11 unique elements, each with its own detailed description

The automatic form completion feature in JavaScript failed to function

Switching the visibility of rows in a table

Attempting to increase by one with each visit to the page

Leverage the power of npm packages within a Flutter mobile app's webview

Is there a way to access hover effect information in Atom editor similar to how it appears in VScode?

Tips on implementing the onChange event in a custom text input for React Native applications

Alignment of Material within Two Adjacent Divisions

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Unable to Retrieve Modified Content with $().text();

How can JavaScript be used to run a script only when the screen width is less than 480, and not when it is greater than 480?

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by