Develop Reference

scope for jquery onclick event/parameters with generic onclick event

How would I capture additional details in a div/span tag with a generic onclick event?
I.e.,
<span id=item1>Value #001<span id=clickableitem>xxx</span></span>
<span id=item2>Value #002<span id=clickableitem>xxx</span></span>
<span id=item3>Value #003<span id=clickableitem>xxx</span></span>
And then:
$(document).on('click','#clickableitem',function(e){
e.preventDefault();
// how do I get the "value #001, #002, #003" value just 'outside'
// of the span tag?
I was trying to figure it out with .parent().html(), but that didn't quite seem to work...
Thanks!

HTML:
<span id=item1>Value #001<span class="clickableitem">xxx</span></span>
<span id=item2>Value #002<span class="clickableitem">xxx</span></span>
<span id=item3>Value #003<span class="clickableitem">xxx</span></span>
JS:
$('.clickableitem').click(function() {
let text = $(this).parent().text().substring(0, $(this).parent().text().indexOf($(this).text()));
console.log(text);
});

Replacing the text is unsafe could be resulting in an empty text if the value is the same as xxxx child span....
This aproach is more effective
HTML
<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>
JS
$(document).on('click','.spanClickable',function(e){
alert( $(this).parent().contents().get(0).nodeValue );
});

The id property should always be unique, instead give your span's a common className and hook up the event handler callback with it, also, in your HTML
you need to put single or double quotes around the values of properties such as id and class:
HTML:
<span id='item1'>Value #001<span id='clickableitem1' class='spanClickable'>xxx</span></span>
<span id='item2'>Value #002<span id='clickableitem2' class='spanClickable'>xxx</span></span>
<span id='item3'>Value #003<span id='clickableitem3' class='spanClickable'>xxx</span></span>
JQuery:
$(document).on('click','.spanClickable',function(e){
e.preventDefault();
//Using .text() on the parent produces the child span text as well
//Replace the child text and the word Value since all you want is
//ex. #001
const childSpanText = $(this).text();
alert($(this).parent().text().replace(childSpanText, "").replace('Value ', ''));
});
Working Fiddle
(https://jsfiddle.net/a5Lkon4j/2/)

Using regex with javascript on nodejs find html attribute and prepend something to its value

I have some markup in JS as follows:
<div class="col-sm-4">
<span id="some-media" class="media">Text</span>
</div>
I would like to select the class attribute of the span and prepend its value with lets say the characters: "::". So after the regex replace i would end up with:
<div class="col-sm-4">
<span id="some-media" class="::media">Text</span>
</div>
EDIT: Note that the order of the attributes in the HTML element is variable so my span attributes could very well have different order like so:
<div class="col-sm-4">
<span class="::media" id="some-media" >Text</span>
</div>

You got a regex solution, this is a DOMmy one:
var html = `<div class="col-sm-4">
<span id="some-media" class="media">Text</span>
</div>`
var doc = (new DOMParser()).parseFromString(html, "text/html");
var el = doc.getElementsByTagName('span')[0];
el.setAttribute('class', '::' + el.className);
console.log(
doc.getElementsByClassName('::media').length > 0 // check if modification's done
);
Since you have no way except Regular Expressions this can be considered as a workaround:
(<span[^>]*class=.)([^'"]+)
JS:
var html = `<div class="col-sm-4">
<span id="some-media" class="media">Text</span>
</div>
<span class="media" id="some-media">Text</span>
`;
console.log(
html.replace(/(<span[^>]*class=.)([^'"]+)/g, `$1::$2`)
);

This isn't using regex, but you can do it like this in vanilla JavaScript:
const el = document.getElementsByClassName('media')[0];
el.className = '::' + el.className;
Or in jQuery:
const $el = $('div span.media');
$el.attr('class', '::' + $el.attr('class'));
Hope this helps.

Don't parse html with regex, use DocumentFragment (or DOMParser) object instead:
var html_str = '<div class="col-sm-4"><span class="media">Text</span></div>',
df = document.createRange().createContextualFragment(html_str),
span = df.querySelector('span');
span.setAttribute('class', '::' + span.getAttribute('class'));
console.log(df.querySelector('div').outerHTML);

I think this is what you're after:
var test = $("#some-media")[0].outerHTML();
var test2 = '<div id="some-media" class="media">Text</div>'
if(/span/.test(test)) //Valid as contains 'span'
alert(test.replace(/(class=")/g, "$1::"));
if(/span/.test(test2)) //Not valid
alert(test.replace(/(class=")/g, "$1::"));

Since the order differs, writing a regex that captures all possible combinations of syntax might be rather difficult.
So we'd need a full list of rules the span follows so we can identify that span?
Got some more info about if the span occurs in a longer HTML string? Or is the string this span and this span only?
An alternative would be to use one of the several node DOM modules available, so you can work with HTML nodes and be able to use any of the above solutions to make the problem simpler.
But since you're using node:
1) Are you using any templating engines? If so, why not rerender the entire template?
2) Why does the class name have to change on the server side? Isn't there a workaround on the clientside where you do have access to the DOM natively? Or if it's just to add styling, why not add another css file that overwrites the styling of spans with className 'media'?
3) If all of the above is not applicable and it;s a trivial problem like you say, what error di you get using a simple replace?
strHTML.replace( 'class="media"', 'class="::media"' )
or if it has to be regex:
strHTML.replace( /class=\"(.*)\"/, 'class=\"::$1\"' );

Editing quickedit-label text

I would like to change the text of the quickedit-label class.
<span class="quickedit" data-id="9917488">
<span class="quickedit-content">
<span class="quickedit-label">Label text</span>
<a class="rename-icon" href="#" title="Rename"></a>
</span>
</span>
I used the following code to get the text and pass it to a variable, then change the text and assign it to the element.
var labelContent = $('a.quickedit').text;
var newLabel = labelContent.subst(6,9);
$('a.quickedit').text = newLabel;
I tried using innerhtml, .data() and .value() but all returned incorrect outputs.
I know this isn't correct (and the newLabel format is just for demonstration purposes) but this should outline what I'm trying to do.
Ideally, I would like to have this within a function where the data-id of the span I want to edit is passed.
Thanks for any help on this.

You can use jquery .text( function ) method to do this work like this example.
$(".quickedit-label").text(function(index, text){
return text.substr(6, 9);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="quickedit-label">Label text</span>

How to replace inner content of a class?

I have used a class 4 times in a page and I want to replace the content from one of them by using JavaScript
Here is the code of my html
<span class="footer">Publisher Solutions</span>
<span class="footer">Social Media 360</span>
<span class="footer">Partnerships</span>
<span class="footer">Brown Bag Presentations</span>
and I want to change like this
<span class="footer">Publisher Solutions</span>
<span class="footer">Social Media 360</span>
<span class="footer">Partnerships</span>
<span class="footer">Custom New Text From js</span>

Would something like this fits?
var elems = document.getElementsByClassName("footer");
var elem = elems[3];
elem.firstChild.href="edited_link_from_js.html";
elem.firstChild.innerHTML="My new text";
Here I manually select the 4th one, but you can change by elems.lenght - 1 if you always want last, or any selector you need.

JQuery inccorectly append created JQuery object

folks.
I have question about Jquery.append() method. I nothing found in documentation about my problem (or I doesn't search enough).
I have following HTML markup.
<li class="active bug-droppable" bugId="1">
<a href="#">Super Bug 1
<span class="badge badge-primary">2</span>
</a>
</li>
I using bootstrap and want to add span tag which represent icon to anchor tag.
I do following and this works good enough. But I want to create function which allow customize icon. ("this" references to "li")
var PLUS_ICON = '<span class="pull-right glyphicon glyphicon-plus-sign medium-icon"></span>';
$(this).find("a").append(PLUS_ICON);
I tried following, it's looks similar but it doesn't work.
var ICON_DUMMY = '<span class="glyphicon medium-icon"></span>'
var ICON_PLUS_CLASS = ".glyphicon-plus-sign";
var PULL_RIGHT = ".pull-right";
var $icon = $(ICON_DUMMY).addClass(ICON_PLUS_CLASS).addClass(PULL_RIGHT);
$(this).find("a").append($icon);
Who can explain why second case doesn't work?
Thanks for your time.

Because you have a period in front of the class name. That is invalid for class attribute.
Change like so and it should work.
var ICON_PLUS_CLASS = "glyphicon-plus-sign";
var PULL_RIGHT = "pull-right";

try
var ICON_PLUS_CLASS = "glyphicon-plus-sign";
var PULL_RIGHT = "pull-right";
var $icon = $('<span class="glyphicon medium-icon"></span>').addClass(ICON_PLUS_CLASS).addClass(PULL_RIGHT);