Develop Reference

Can javascript cut out a special part from a class and use it in any other place?

The question might not be clear, but I shall clear it now. In CSS libraries they use classes such as "bg-blue", "text-red", I am especially talking about TailWind. But these classes are limited, if someone want a new color he / she has to go with CSS. So finally I stuck to an idea. Let's take an example :
HTML :
<h1 class="cbg-008eff"></h1>
/* cbg = Custom Background */
JS :
I dont know what to write here....
Actually I want JavaScript to get every classes in the html document which starts with "cbg-", therefore it should understand that a background is to be placed, and the rest part after "cbg" is the value to set. Can this be done ?
Thanks In Advance

You could split the class ID as a string by the '-' using the Javascript Split function, not sure how you could get the class ID tho but then you can get the Colour ID as Ramon said. Then use this to implement it: https://www.w3schools.com/js/js_htmldom_css.asp

JavaScript: backgroundImage isn't changing with onMouseOver

I'm pretty new to JavaScript, and I'm trying to figure something out. I have a series of images within a table, and I'd like each image to display within a div element when you hover over one. The problem is, the code doesn't appear to be doing anything. I hover over the div element, and no changes are being made to the #bigdisplay element. If I replace the backgroundImage with a property such as color, it works completely fine. What am I doing wrong? This is the code for my div element.
<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>
If I must provide any other code from my site I will (although I don't believe any of it is relevant). Any help would be greatly appreciated! Thank you!

Your code is fine. I separated the js just to make it easier to read. Your problem is either you have no height to the div or your path is wrong
function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}
html,body,div{
height:100%;
}
<div id="bigdisplay" onmouseover="test()">
test
</div>

You're not properly escaping the string in the attribute. Attach the listener in Javascript instead, rather than in HTML attributes (which is as bad as eval) and it'll be easier to read and write:
const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

I think one problem is that you used single quote to quote 'images/Slideshow1.png'. But you used single quote also for 'url('images/Slideshow1.png')'. So there is a conflict. Try 'url("images/Slideshow1.png")'. A part for this I find better to define the event handler function in the js document linked to the html document.

Selecting an HTML element by it's ID attribute with jQuery

I picked up some code on CodePen to help me dynamically replace the content of divs. It works, but as often happens when borrowing someone's code, I can't actually mold it to what I want it to do.
The original code provides pictures of animals, and when you click it, it sends the text of the name of the animal to a div. The Javascript looks like this:
$('#kittens').click(function() {
$('div').html('Kittens');
});
$('#aardvark').click(function() {
$('div').html('Aardvark');
});
I'm applying it to a more complicated webpage, so I really can't have it just replace the first level div with the word "Kittens."
I've found that by keeping the single quotes, I can put any text or code I want in there and it works just fine, but only if I'm writing to the first level div.
So I figure to target it, I should just give it the div ID. Something like:
$('#kittens').click(function() {
$('myDivName').html('Kittens');
});
This does nothing. I've also tried 'id=myDivName' , 'id="myDivName"' , id: myDivName , and a few others I can't recall right now. Nothing I can come up with seems to work.
Does anybody know how this parameter works and how I can get it to target just the div I want?

jQuery selectors work just like CSS selectors, so instead of $('myDivName'), do $('#myDivName')

when referencing an element in jquery, you need to use it's css selector. For an element with an id "myDivName" that selector would be #myDivName so your jquery would look like:
$('#kittens').click(function() {
$('#myDivName').html('Kittens');
});

Removal of link using JQuery

I am trying to do a very simple task but I cannot seem to figure it out. I am trying to write a function that will remove a link without removing the text associated with it. Here are the specifics:
Categories[/CODE]
I am trying to remove everything EXCEPT the text "Categories", I just want to remove the href tag. I would even be willing to rename the title "Categories". I just want to link gone. This link is in a div called "mw-normal-catlinks" and it is the first link in the div. I do not want to remove the other content in that div.
I am very new to jQuery and so far I have an idea of what to do. This is what I got:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#mw-normal-catlinks a.first').replaceWith('Categories');
</script>
Now I am not sure if I am missing anything because when i put this in my HTML code, nothing happens. I'm not sure if I need to add a div to make it work.
I want to eventually implement this into a PHP coded tool I use to convert wiki pages to html so maybe I will need to add some sort of div?
Thanks everyone!

Use .unwrap()
$('#mw-normal-catlinks a.first').contents().unwrap();
Also you probably want this selector instead since your a tag doesn't have a class of .first:
$('#mw-normal-catlinks a:first-child').contents().unwrap();

.first means "A member of the class first", you might be confusing it with :first-child or :first-of-type

Find part of string throughout site and replace with new text

I am still having trouble understanding regex. I am also not even sure if you can target a whole page...but without knowledge of how to format regex, its getting play with it.
I have a trademarked name that appears throughout my page. I'd like to use JS to add a (r) to the end of it every time it appears.
Can jquery/js accomplish this?
$("body").each(function() {
this.innerHTML = this.innerHTML.replace(
'breathe right',
'breathe right(r)');
});
Thanks!

This is a good use case for the CSS :after pseudo-element:
CSS
.product-name:after {
content: " \00AE"; /* add restricted symbol after every element with the product-name class */
}
HTML
<span class="product-name">My Product</span>
Working Demo
The easiest way is to wrap your product name in a span and tag it with a class. I'm not sure if that's less work that just adding the symbol to your markup to begin with, though.
The benefit of this approach is it would allow you to easily apply other styles to your product name, like bolding the text or changing the font color.
You can read more about the :after pseudo-element here.

Yes, but it won't be efficient if you tell jQuery to search the entire document. To make it efficient, you'll need to have jQuery get a specific location to search if you want any efficiency in it.

You don't need jQuery :
document.body.innerHTML = document.body.innerHTML.replace(/breathe right/g, 'breathe right(r)')