Develop Reference

Change icon if text contains string with jQuery

I have the following structure that cannot be changed:
<div class="activityinstance">
<a class="aalink" onclick="" href="https://...">
<img src="..../icon" class="iconlarge activityicon">
<span class="instancename">[h5p-iv] Interaktives Video
<span class="accesshide ">Interactive Content</span>
</span>
</a>
</div>
What I need to do, is to change the icon if span.instancename contains "[h5p-iv]" (plus, ideally, delete or hide that partial string from the span)
The "if" and "then" are not part of the code and the last line is unfinished, this is intended to show what I want to achieve. How do I construct an if-then in Javascript to achieve that logic?
if
$(".activityinstance .instancename:contains('[h5p-iv]')")
then
$(".activityicon") attr("src", "/static/img/icons/video.svg");
The second part is to change
<span class="instancename">[h5p-iv] Interaktives Video</span>
into
<span class="instancename">Interaktives Video</span>
that is: removing the string from "contains"
Explanation:
Moodle does not discern H5P activities, they all get the same icon. Teachers are supposed to be able to enter strings to the activity-names in order to get a different icon. So in the end there will be a list of strings linked to different icons. If that can be simplified by a switch etc., even better, but there are not that many different icons, that it would be unreasonable to repeat the code regardingly.
Additions 1: added span.accesshide because it became visible after string replacement.
Additions 2: I actually have a (kind of) working code now, but I suppose it could be done more safely and elegantly.... Any suggestions?
var elem = $(".instancename:contains('[icon-video]')");
if (elem.length) {
$(".instancename:contains('[icon-video]')").each(function() {
$(this).prev().attr("src", "/static/img/icons/video.svg");
$(".accesshide").remove();
elem.text(function(_, text) { return text.replace('[icon-video] ', '');
});
});
}
Esp. removing the .accesshide worries me, I am not sure, what it does and I would rather just remove the display and not the whole thing from the DOM. I suppose the text replace reads the whole text including the contained span.accesshide and puts the text back minus the replaced text - but also removing the span.accesshide-tag thus it looses its css that makes it invisible.

jQuery object is truthy so you would need to check its length to see if it found the element. Other thing you need to do is just do a simple string replacement
var elem = $(".activityinstance .instancename:contains('[h5p-iv]')");
if (elem.length) {
$(".activityicon").attr("src", "/static/img/icons/video.svg");
elem.text(function(_, text) { return text.replace('[h5p-iv] ', ''); });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="activityinstance">
<a class="aalink" onclick="" href="https://...">
<img src="..../icon" class="iconlarge activityicon">
<span class="instancename">[h5p-iv] Interaktives Video</span>
</a>
</div>
Now since you said it could be multiple
function replaceThis(text, imgPath) {
$(".activityinstance .instancename:contains('" + text + "')").each(function() {
const instanceName = $(this);
instanceName.find(".accesshide").hide();
instanceName.prev("img").attr("src", imgPath);
instanceName.contents().each(function(_, node) {
if (node.nodeValue && node.nodeValue.includes(text)) {
node.nodeValue = node.nodeValue.replace(text, "");
}
})
});
}
replaceThis("[h5p-iv] ", "http://placekitten.com/20/20");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="activityinstance">
<a class="aalink" onclick="" href="https://...">
<img src="..../icon" class="iconlarge activityicon">
<span class="instancename">[h5p-iv] Interaktives Video
<span class="accesshide ">Interactive Content</span>
</span>
</a>
</div>

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/)

Use button to setAttribute and display it within span tag

I am trying to create a real-world example of get and set data attribute.
so I created a simple div that contains the data-email attribute and set a default one.
Now what I want to attain is when I click on the button it will change the default attribute to the set attribute on my JavaScript codes.
Currently I also don't know how can I show the data attribute value inside tag of my div.
here's my markup:
<div id="my-id" data-email="youremail#email.com">Sam's email is <span> "Show Email Here" </span> </div>
<button type="button" id="btn-id" onclick="click-btn()">Set Attribute Now</button>
here's my JavaScript:
var email = document.getElementById('my-id');
var emailget = email.getAttribute('data-email');
var button = document.getElementById('btn-id');
function click-btn(){
emailset = email.setAttribute('data-email', newemail#email.com);
}
here's the JSFIDDLE link: http://jsfiddle.net/jypb2jdg/6/
Any idea?

As #adeneo suggested we should not use hyphen in function name as it may be interpreted as minus sign, so remove and you may use like this:
You need to use quote in setAttribute value:
function clickBtn(){
emailset = email.setAttribute('data-email', 'newemail#email.com');
//^^ here ^^
}
You need something like this:
function clickBtn(){
emailset = email.setAttribute('data-email',
email.getAttribute('data-email') || 'newemail#email.com');
}

First thing is that the email you've written must be within quotes.
<div id="my-id" data-email="youremail#email.com">Sam's email is <span id="my-span-id"> "Show Email Here" </span> </div>
<button type="button" id="btn-id" onclick="click_btn()">Set Attribute Now</button>
The JS code:
function click_btn(){
var email = document.getElementById('my-id');
var emailContainer = document.getElementById("my-span-id");
var emailget = email.getAttribute('data-email');
emailContainer.innerText = emailget;
emailset = email.setAttribute('data-email', "newemail#email.com");
}
The code can be found in:
http://jsfiddle.net/jypb2jdg/17/
Some point I want to mention:
Include the JS before the div. Because button will not recognize click_btn() function before its declaration;
Do not use '-' symbol for function names in JS.
You could write a script without using ID for span. It will need additional structs (finding child elements, figuring out which one is what you need, set its' innertext.

You need to keep in mind that functions in javascript cannot have hyphens in their name as it is treated as a mathematical operator. Rest is just plain DOM manipulation :
<div id='my-id' data-email="youremail#email.com">Sam's email is <span id="mail"> "Show Email Here" </span>
</div>
<button type="button" id="btn-id" onclick="clickbtn()">Set Attribute Now</button>
jS:
var em;
window.onload = function(){
em = document.getElementById("my-id");
document.getElementById("mail").innerHTML = em.getAttribute("data-email");
};
function clickbtn(){
var old_mail = em.getAttribute("data-email");
em.setAttribute("data-email","newmail");
document.getElementById("mail").innerHTML = em.getAttribute("data-email");
}
Fiddle : http://jsfiddle.net/dndnqygL/4/
Note : instead of assigning a new id to the span you can also use the element.firstChild property to set the innerHTML.

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 find and replace string

I have somewhere on website a specific text, let's say "lollypops", and I want to replace all the occurrences of this string with "marshmellows". The problem is that I don't know where exactly the text is. I know I could do something like:
$(body).html($(body).html().replace('lollypops', 'marshmellows'));
This would probably work, but I need to rewrite as little HTML as I can, so I'm thinking something like:
search for the string
find the closest parent element
rewrite only the closest parent element
replace this even in attributes, but not all, for example replace it in class, but not in src
In example, I would have structure like this
<body>
<div>
<div>
<p>
<h1>
<a>lollypops</a>
</h1>
</p>
<span>lollypops</span>
</div>
</div>
<p>
<span class="lollypops">Hello, World!</span>
<img src="/lollypops.jpg" alt="Cool image" />
</p>
<body>
In this example, every occurrence of "lollypops" would be replaced, only <img src="... would remain the same and the only elements that would actually be manipulated would be <a> and both <span>s.
Does anybody know how to do this?

You could do something like this:
$("span, p").each(function() {
var text = $(this).text();
text = text.replace("lollypops", "marshmellows");
$(this).text(text);
});
It will be better to mark all tags with text that needs to be examined with a suitable class name.
Also, this may have performance issues. jQuery or javascript in general aren't really suitable for this kind of operations. You are better off doing it server side.

You could do something this way:
$(document.body).find('*').each(function() {
if($(this).hasClass('lollypops')){ //class replacing..many ways to do this :)
$(this).removeClass('lollypops');
$(this).addClass('marshmellows');
}
var tmp = $(this).children().remove(); //removing and saving children to a tmp obj
var text = $(this).text(); //getting just current node text
text = text.replace(/lollypops/g, "marshmellows"); //replacing every lollypops occurence with marshmellows
$(this).text(text); //setting text
$(this).append(tmp); //re-append 'foundlings'
});
example: http://jsfiddle.net/steweb/MhQZD/

You could do something like this:
HTML
<div class="element">
<span>Hi, I am Murtaza</span>
</div>
jQuery
$(".element span").text(function(index, text) {
return text.replace('am', 'am not');
});

Below is the code I used to replace some text, with colored text. It's simple, took the text and replace it within an HTML tag. It works for each words in that class tags.
$('.hightlight').each(function(){
//highlight_words('going', this);
var high = 'going';
high = high.replace(/\W/g, '');
var str = high.split(" ");
var text = $(this).text();
text = text.replace(str, "<span style='color: blue'>"+str+"</span>");
$(this).html(text);
});

var string ='my string'
var new_string = string.replace('string','new string');
alert(string);
alert(new_string);

Why you just don't add a class to the string container and then replace the inner text ? Just like in this example.
HTML:
<div>
<div>
<p>
<h1>
<a class="swapText">lollipops</a>
</h1>
</p>
<span class="swapText">lollipops</span>
</div>
</div>
<p>
<span class="lollipops">Hello, World!</span>
<img src="/lollipops.jpg" alt="Cool image" />
</p>
jQuery:
$(document).ready(function() {
$('.swapText').text("marshmallows");
});