Develop Reference

Is there a way to apply css to part of the element?

I am looking for a way to apply new CSS to only part of the element.
For example. The original HTML looks like
<p>123456</p>
I want to make only 456 into bold.
Of course, I can do it by adding another tag into 456 like
<p>123<b>456</b></p>
But in my application, I do want not to change the original DOM structure. By adding a new tag, I changed the DOM structure.
To do that, I am thinking of adding new custom attribute to the existing tag like
<p data-wms="e-3">123456</p>
Here data-wms means that there are special part and e-3 means that from index 3 character (it is 4 here) to the end will have a special attribute (like bold in this example)
Now I have all the information about where to change inside the element.
But still, how can I do that with javascript without adding a tag, without changing dom.
Thanks

You can use the span element to do so, it's made specifically to handle inline styling while mantaining the overall structure.
An example would be:
<p>123<span class="bold-highlight">456</span></p>

Thanks to everyone's advice, I researched more, especially about nth-letter.
Though nth-letter is exactly what I want, I found that it is still just proposal, not implemented in any browser.
Thus, there is no way to applying different css letter by letter in one text element without embracing each letter with span tag at this moment (2021-March). I hope that there will be nth-letter in the near future.
I think that I have to re-design my project...

if it's a static page and you want to change a style for specific text in a specific tag like the following case
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
let's say you want just style the third element, you can change it by the following code using jQuery for sure you can use JavaScript but jQuery will help you to make your code shorter
$( "p:nth-child(3)" ).css("color","#f00");

Removing classes defined by a jQuery attribute selector from the results of a jQuery attribute selector

Basic problem, I just want to target all classes that end with a specified string on all elements of a class that ends with a specified string, and remove those classes.
This code doesn't work, but it's close to what I want:
$('[class$="_active"]').removeClass($('[class$="_active"]'))
$('[class$="_active"]') returns a jQuery.fn.init object which I can work through with .each(index,item). I thought it would then be as simple as item.removeClass($('[class$="_active"]')) but the code below does not work either:
$('[class$="_active"]').each(function(index,item){
item.removeClass($('[class$="_active"]'))
})
The removeClass function does not work on the items in my each function. At this point I'm considering stringifying each item, figuring out the text immediately before "_active", removing it from the string along with "_active", then returning the reformed result. But this is just getting too complicated for a basic problem that I assume has a basic answer that I overlooked.

You can use attribute containing selector and attribute ends with selector to get all element with a certain class which ends with _active. To remove the class first you have to extract the certain class from the class list using String#match method(it's only necessary if there are multiple classes for an element).
$('[class$="_active"],[class*="_active "]').each(function(){
$(this).removeClass($(this).attr('class').match(/\S+_active\b/)[0])
// or $(this).removeClass(this.className.match(/\S+_active\b/)[0])
})

Just one lovely Solution
$('[class$="_active"]').each(function(i){$(this).removeClass(this.className)})
this is my jsfiddle link, have a look
https://jsfiddle.net/dupinderdhiman/mgzf2boL/7/

How to make a regex part "backwards lazy"?

Apologies for the terrible title, i don't know how to express this in short form.
I have a string containing html (text, some spans and some <br>s).
What i'm trying to achieve is to find the first span with a class ending "-focused". For added fun, the spans have line returns in the title attribute. However they do have a fixed structure and i can rearrange them if needed.
This is what i have so far:
<span[\s\S]*?class=".*-focused"[\s\S]*?>[\s\S]*?<\/span>
But i get a match from the start of the first span to the end of the matching span.
Here's a regex101 link to illustrate (contains example text)
https://regex101.com/r/W7YDU5/2
I tried playing with positive/negative lookaheads and capturing/non-capturing groups, but i'm more confused than anything at this point.

You should avoid using the first [\s\S] here. To get what you need, you may want to proceed within the same opening tag. That is implicitly done when matching everything except >:
<span[^>]*?class=".*-focused"[^>]*?>[\s\S]*?<\/span>

document.querySelector('span[class=$-focused]')
this should find the first span with a class ending with -focused

How to select element has id start and end with specific text using jquery?

I have multiple divs with ids like course1_popup, course2_popup, course3_popup. I want to make a function something like
$('#course*_popup').hide();
so that all course*_popup divs should hide but this is not working. Any Ideas?

Use the combination of attribute starts with and ends with selectors.
$('[id^="course"][id$="_popup"]').hide();
FYI : It would be much better to use a common class for the group of elements for such things.

Easiest way: Give all the same class like course_popup and then:
$('.course_popup').hide()
Other solution was postet a sec ago ;)

Jquery Select element 2 positions further - another way to .next().next()

I am searching for a way how I could select a div element which is not the direct next one to the one which is "selected" by a click function.
<div id="click">(siblings)</div><div>text</div><div id="get this one"></div>
Now I would like to select the one with the id "get this one" - in my code this id is not available. All the divs have the same class and do have siblings.
I could select the third one by $(this).next().next() but I think it's not the best way to do it.
Also there can be divs before the one which is clicked - so it's not necessarily the first one.
I tried the :nth-child selector but didn't find a solution.
Later I also may want to select the 13th one after the click one (or the 23th, 65th and so on). This means I would like to have a rather dynamic solution to this problem.
Thanks for your help,
Phil

You can use .nextAll() with .eq() for your dynamic approach, like this:
$(this).nextAll().eq(1) //0 based index, this would be .next().next()
This would allow you to get n siblings forward, which seems to be what you're after.

It seems that $(this).parent().find('div').eq(2).attr('id') should work.
UPDATE( Added find('div') )