We Keep Coding

Change text of element for each element that have the same class in jQuery

So, I'm trying to only show certain part of the text. The info is passed like this. Ex: ["PS4"] and I only want the PS4 text to show so I did this with jQuery:
var text = $('.gender').text();
var text2=text.substring(text.indexOf('"')+1,text.lastIndexOf('"'));
$('.gender').text(text2);
The problem is that I want to change every single element text that have .gender class but only having their corresponding text, like so:
["PS4"]["XBOX"]
<div class="gender">PS4</div><div class="gender">XBOX</div>
I tried to do it with .each() function but I got something like this:
<div class="gender">PS4"]["XBOX</div><div class="gender">PS4"]["XBOX</div>
Here's the code with jQuery .each():
$('.gender').each(function(){
var text = $('.gender').text();
var text2=text.substring(text.indexOf('"')+1,text.lastIndexOf('"'));
$('.gender').text(text2);
});
EDIT:
I have an HTML with this:
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>
So I want to remove the '[""]' from every element that have .gender class so it shows like this:
<div class="gender">PS4</div>
<div class="gender">XBOX</div>

Use $(this) and not $(".gender")
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.substring(text.indexOf('"') + 1, text.lastIndexOf('"'));
$(this).text(text2);
});
demo
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.substring(text.indexOf('"') + 1, text.lastIndexOf('"'));
$(this).text(text2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>

You may go for RegEx, with $.text(callback)
$(function() {
$('.gender').text(function() {
return $(this).text().replace(/^\[\"(.*)\"\]$/, '$1');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>
Breakup of, ^\[\"(.*)\"\]$ as below:
^ starts with
(.*) group having any match of any length
$ ends with

Try this one also:
$('.gender').each(function() {
var text = $(this).text();
var text2 = text.replace("\"]", "");
text2 = text2.replace("[\"", "");
$(this).text(text2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gender">["PS4"]</div>
<div class="gender">["XBOX"]</div>

Regex to remove dash and everything after it

I've got a function to remove the dash and everything that comes after it from a title.
This is the JS
<script>
(function() {
var str2 = document.querySelector('.dash-remove').innerHTML;
var txt2 = str2.replace(/ -.*$/g,"");
document.querySelector('.dash-remove').innerHTML = txt2;
})();
</script>
The Html is something like this
<h2 class="dash-remove">Testing - this function</h2>
However this isn't working, it's not removing the dash or the text after.
I've tried just removing the dash like this:
<script>
(function() {
var str2 = document.querySelector('.dash-remove').innerHTML;
var txt2 = str2.replace('-',"");
document.querySelector('.dash-remove').innerHTML = txt2;
})();
</script>
And this works so I assume it's something to do with the regex? any ideas?

As discussed in OP's comments, this may be due to the class being present multiple times. You should then use document.querySelectorAll along with NodeList#forEach :
(function() {
document.querySelectorAll('.dash-remove').forEach(item => {
item.innerHTML = item.innerHTML.replace(/ -.*$/g, '');
});
})();
The Html is something like this
<h2 class="dash-remove">Testing - this function</h2>
<h2 class="dash-remove">Testing - that function</h2>

how to get image url from style attribute

i have html DOM like this i want to grab image url.
<img src="constant/spacer.gif" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="constant/spacer.gif" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
my expected output: ["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];
right now i'm using this code
arr = [];
$('.images-thumb').each(function(){
arr.push($(this).attr('style')); // furthur i don't know
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">
Furthur i don't know how to exactly grab
["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];
please help me thanks in advance

You could do:
url = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
This will remove url(' and url(" from the beginning of the string if it is present and ") resp. ') from the end.
arr = [];
$('.images-thumb').each(function(){
var $style = $(this).attr('style');
var $url = $style.replace(/^background-image:url\(["']?/, '').replace(/["']?\)$/, '').replace(/\)/, '');
arr.push($url); // further know you know :-P
});
console.log(arr);

You can simply use
var images = document.querySelectorAll('.images-thumb');
var image, arr=[];
for(var i=0; i<images.length;i++){
image = window.getComputedStyle(images[i]).backgroundImage;
arr.push(image.substr(5, image.length-7));
}
console.log(arr);
Pure JS method to grab all the styles of the element.

You can give the image path in src attribute, otherwise the script will be like below
arr = [];
$('.images-thumb').each(function(){
var txt = $(this).attr('style');
first = txt.indexOf('(');
second = txt.indexOf(')');
arr.push(txt.substr(first+1,second-first-1));
});
console.log(arr);
Just check once

Replace the unwanted text with empty string "" :
Example snippet:
arr = [];
$('.images-thumb').each(function() {
arr.push($(this).css("background-image").replace("url(\"", "").replace("\")", ""));
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">

You can use JQuery css("background-image") selector and regular expression to get the desired result.
arr = [];
$('.images-thumb').each(function(){
arr.push($(this).css("background-image").replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, ''));
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">
<img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">

Javascript string replace has no effect

I have the following structure:
<span class="h1">Color green</span>
<div class="swatchesContainer">
<img title="green" src="/"/>
<img title="blue" src="/"/>
</div>
Now I want to change the color in the in the span to the color which is stated in the titleof the image. (No I am not able to add a class with the color name)
I have tried te following code:
var product_name = jQuery(".h1").text();
jQuery(".swatchesContainer img").click(function(){
var selected_color = jQuery(this).attr('title');
var string;
console.log("String before: " + product_name);
jQuery('.swatchesContainer img').each(function(){
string = product_name.replace(jQuery(this).attr('title').trim(),' ');
console.log(jQuery(this).attr('title'));
})
console.log("String after: " + string);
jQuery(".h1").text(string + " " +selected_color);
});
I'm fetching all the title attributes from te images and replace them from te text in the same foreach function
But the new color keeps appending after the existing color
JSFiddle

There is a flaw in your logic. Inside the loop you are repeatedly overwriting the string variable:
string = product_name.replace(...)
At the end of loop you will have "Color green".replace("blue", " ") -> "Color green".
Change these lines:
var string;
// ...
string = product_name.replace(jQuery(this).attr('title').trim(),' ');
To these:
var string = product_name;
// ...
string = string.replace(jQuery(this).attr('title').trim(),' ');
Updated Fiddle
Having said all that, I would rather change the markup to this:
<span class="h1">Color <span class="chosen-color">green</span></span>
<div class="swatchesContainer">
<img title="green">
<img title="blue">
</div>
And overwrite the contents of .chosen-color instead of get/match/replace the entire text inside .h1. Your jQuery code will be reduced to one line.

Another approach would be:
var span = $('.h1');
$('.swatchesContainer img').on('click', function() {
var txtArr = span.text().split(' ');
txtArr[1] = this.title;
span.text( txtArr.join(' ') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="h1">Color green</span>
<div class="swatchesContainer">
<img title="green" src="/"/>
<img title="blue" src="/"/>
</div>

How to extract all hyperlink titles from big html string using javascript?

I got an HTML string as :var code; I want to extract all hyper link title values in this big string and place them in textarea. I tried the following but it never works. could any one tell me what i am doing wrong?
sample hyperlinks to look for(i want to extract mango,cherry,...) :
mango
cherry
my code string has blocks of data like below:
<div class="details">
<div class="title">
mango
<span class="type">3</span>
</div>
</div>
full code:
$.getJSON('http://anyorigin.com/get?url=http://asite.com/getit.php/&callback=?', function(data){
//$('#output').html(data.contents);
var siteContents = data.contents;
//writes to textarea
document.myform.outputtext.value = siteContents ;
var start = siteContents.indexOf('<ul class="list">');
var end = siteContents.indexOf('<ul class="pag">', start);
var code = siteContents.substring(start, end);
document.myform2.outputtext2.value = code ;
var pattern = /<a href="([^"]+?)">([^<]+?)<\/a>/gi;
code = code.match(pattern);
for (i = 0; i < code.length; i++) {
document.write($2<br />'));
}
});
</script>

It looks like you're trying to parse HTML with regex. This post has some more info on that topic.
Since this question is tagged as jQuery, you could try something like the following...
Make a jQuery object out of the returned HTML:
$markup = $(data.contents);
Find the anchors:
$anchors = $markup.find('a');
Get the text (or whatever attribute you want from it):
arrText = [];
$anchors.each(function() {
arrText.push($(this).text());
});
Put result into textarea:
$textarea.val(arrText.join(','));

To achive this jquery is the simplest solution, you can try below code
$('a').each(function(){
var copiedTitle = $(this).html();
var previous = $('#test').html();
var newText = previous +"\n"+ copiedTitle;
$('#test').html(newText);
});
JS Fiddle