Develop Reference

Parse html string and delete some elements

I have a html string and I need to remove all between first occurrence of <div class="c and first close tag > and last closing tag "</div>". The first, should be this because it class is dynamically generated.
For example: <div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div> should be transformed to <p class="auto">Testing 123...</p>
I tried this, but it's removing all string:
var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/\<div\_c.*\>/, '');
The content into div that should be removed is dynamically generated, it is an example.
More examples of dynamic string generated:
var testString = '<div class="c03"><div style="text-align: center">Testing 123...</div></div>';
var testString = '<div class="c435">Hello</div>';
var testString = '<div class="c1980">TEST</div>';

No need to use regular expressions, you can achieve this with jQuery's $.fn.unwrap:
$('[class^="c"]').children().unwrap()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="c2029" style="font-size:45px">
<p class="auto">Testing 123...</p>
</div>
To make it more bullet proof and target only element with class staring with "c" and with numbers after you could add additional filtering step:
$('[class^="c"]').filter(function () {
return this.className.match(/\bc\d+\b/)
}).children().unwrap()
This way it will not affect classes like cello (starts with "c").

Regex is wrong tool for this. You can just $.parseHTML() and then find() using [name^=”value”] selector and use it:
var all = ['<div><div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div></div>', '<div><div class="c435">Hello</div></div>', '<div><div class="c1980">TEST</div></div>'];
$.each(all, function(k,s) { f(s); });
function f(s) {
var nodes = $($.parseHTML(s)); // parse string to jquery object
var $p = nodes.find('div[class^="c"]'); // select all classes that starts with c
var inner = $p.prop('innerHTML'); // inner html of $p
console.log("Inner: " + inner);
$p.html(''); // select children of $p and remove
var outer = $p.prop('outerHTML'); // outer html of $p
console.log("Outer: " + outer);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Based on Stack Overflow answers, I found this solution that resolve my problem:
var testString = '<div class="c2029" style="font-size:45px"><p class="auto">Testing 123...</p></div>'
var result = testString.replace(/<div class="c.*?>(.*?)<\/div>/, '$1');
document.write(result);
console.log(result);

replace part of href between 2 words jquery

This is simple and I have done it before but can't make it work right now.
I need to change the name of the image in below href
var href="https://www.facebook.com/sharer/sharer.php?u=http://myurl.com/&description='tets'&picture=http://myurl.com/img/name-1654-45654.jpg"
$('.share, .share-2').prop('href', function () {
$(this).replace(/(picture=).*?(&)/,'$1' + imgNew + '$2');
});

Since the href string is a URL, you can take advantage of the URL object.
var imgNew = 'http://example.com/img.png';
var href = "https://www.facebook.com/sharer/sharer.php?u=http://myurl.com/&description='tets'&picture=http://myurl.com/img/name-1654-45654.jpg";
var url = new URL(href);
url.searchParams.set('picture', imgNew);
console.log(url.href);
Note that not all browsers are supported at this time, so you can use a polyfill.

The replace function is a method of string, so you can't call replace from $(this) because it is a jQuery object, not a string.
If you need to change the href attribute, just use this.href = ....
EDIT: As you are using jQuery.prop method you should use it as docs proposes.
$(".some-element").prop('some-prop', function(index, old_value){
// do something
return new_value;
});
Snippet updated:
var new_img = "http://my.domain.com/img/my_new_image.jpg";
var regex_img = /\bpicture=[^&]*/
$('.share, .share-2').prop('href', function (index, old_href) {
var new_href = old_href.replace(regex_img, 'picture=' + new_img);
console.log(new_href);
return new_href;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Test
<br>
Test-2

var href="https://www.facebook.com/sharer/sharer.php?
u=http://myurl.com/&description='tets'&picture=http://myurl.com/img/name-
1654-45654.jpg"
href.split('/')
["https:", "", "www.facebook.com", "sharer", "sharer.php?u=http:", "",
"myurl.com", "&description='tets'&picture=http:", "", "myurl.com", "img",
"name-1654-45654.jpg"]
href.split('/').length
12
href.split('/')[11]
"name-1654-45654.jpg"

You should change your code to the following one.
href="https://www.facebook.com/sharer/sharer.php?u=http://myurl.com/&description='tets'&picture=http://myurl.com/img/name-1654-45654.jpg"
$('.share, .share-2').prop('href', function () {
$(this).replace(/\/(?=[^\/]*$)/, '/newpicturename'));
});
The last slash and following words will be replaced by the new picture name.
An example
var str = "http://one/two/three/four";
console.log(str.replace(/\/(?=[^\/]*$)/, '/newpicturename'));

Find ID in String using match

I'm building a widget that will generate a graph for an element when it is double clicked on the page. Without remaking all widgets this is the only way for me to tackle the problem.
I want find the ID of a widget from the html of an element.
All widgets I want to work are inside a div element panel_content_id_#
I want to find the number found on the line of code
var io_id=32715;
How can I search the string for this pattern and get the number (32715).
$('div[id^="panel_content_id_"]').dblclick(function(e){
console.log($(this).attr('id'));
var code = $(this).html();
// Find ID
var id = -1;
var search = code.match("var io_id=");
if(search > -1){
}
console.log($(this).html());
});
The line of code im looking for will look like so
var io_id=xxxxx;
Where xxxxx = some random number I dont know
I want to find xxxxx

Split it in two parts - All the code before the var io_id= and the other part is after that.
And then you know that the line ends with ;, so from that second part you cut of the stuff that is before the semicolon.
CODE
$('div[id^="panel_content_id_"]').dblclick(function(e){
console.log($(this).attr('id'));
var code = $(this).html();
// Find ID
var id = -1;
if (code.indexOf("var io_id")>-1) {
id = parseInt(code.split("var io_id=")[1].split(";")[0]);
}
if(search > -1){
console.log("The code betrayed me");
}
console.log("The id is: " +id);
});

Maybe you could try this regex pattern:
\d+(?! var io_id=)
Used like this:
$('div[id^="panel_content_id_"]').dblclick(function(e) {
console.log($(this).attr('id'));
var code = $(this).html();
// Find ID
var id = -1;
var search = code.match("var io_id=");
if (search) { // Edited
// New code
alert(code.match(/\d+(?! var io_id=)/gim));
}
console.log($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel_content_id_32715">
Div content
<br><br>
var io_id=32715;
</div>

Get last part of the url

Trying to get the last part of the url in a pretty weird html structure. Don't ask why it's built that way. There is a very good reason behind it.
The html looks like this
<li class="lifilter"><input type="checkbox" class="filtercheck" id="Cheeks...">
<label for="Cheeks...">
Cheeks
</label>
</li>
and the js i'm trying to use
$('#Cheeks... label a').each(function(){
var lasturl = $(this).attr('href');
var urlsplit = url.split("/");
var finalvar = urlsplit[4];
$(this).addClass(finalvar);
});
edit: damn.. i can only post once every 90 minutes.
here is updated question with updated html
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="Cheeks...">
<label for="Cheeks...">
Cheeks
</label>
</li>
and the js code i'm trying to use (from a previous answer)
$('.lifilter').each(function(){
$(this).find(".filtercheck").next('label').find('a').each(function(){
var lasturl = $(this).attr('href');
var urlsplit = lasturl.split("/");
console.log(urlsplit);
var finalvar = urlsplit.pop();
console.log('Adding class: ' + finalvar);
$(this).addClass(finalvar);
});
});

OK, so it appears no one here attempted to try the solution here before posting.
First things first cheeks.... This is a tricky ID to find (You have to escape the periods). The label is also not part of the internal html where ID is cheeks..., so we need to find the adjacent element and look the a anchor tag you're looking for.
Here's the code:
$(document).ready(function() {
$('#Cheeks\\.\\.\\.').next('label').find('a').each(function(){
var lasturl = $(this).attr('href');
var urlsplit = lasturl.split("/");
console.log(urlsplit);
var finalvar = urlsplit.pop();
console.log('Adding class: ' + finalvar);
$(this).addClass(finalvar);
});
});
And here is a working jsfiddle with the solution.

keeping it simple like your code you'd do
finalvar = urlsplit[urlsplit.length-1];
in case you don't want the base url as a valid return then:
finalvar = ( urlsplit.length > 1 ? urlsplit[urlsplit.length-1] : "" );
replace "" with your preferred error/default return
you could also try to find the index of the last '/' and do a substring.

try this.
FIDDLE DEMO
var URI = 'www.example.com/sub1/sub2/sub3/',
parts = URI.split('/'),
lastPart = parts.pop() == '' ? parts[parts.length - 1] : parts.pop();
//RESULT : "sub3"

You can extract the last section of a path (i.e. everything after the last /) by using a regular expression:
text.replace(/.*\//g, "")
This will remove all of the text before a slash, as well as the slash itself. You'll also notice that your selector wasn't matching any elements; you're looking for labels nested within inputs, which doesn't match the html you posted (and isn't a valid DOM structure). An appropriate selector would be .lifilter label a, since the <label> is within the <li>.
$(function() {
setTimeout(function() {
$('.lifilter label a').each(function() {
// strip everything up to and including the last forward slash
var path = $(this).attr('href').replace(/.*\//g, "");
$(this).addClass(path);
});
}, 1500);
});
a.cheeks:after {
content: " (className = 'cheeks')";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="lifilter">
<input type="checkbox" class="filtercheck" id="Cheeks...">
<label for="Cheeks...">
Cheeks
</label>
</li>

if you want the last section of url for example activation code or id.You can try this.
var url = 'www.abc.com/code=12345',
parts = url.split('='),
lastPart = parts.pop()
//lastPart = 12345

How can i get element id in js function?

JS doesn't see input ID(undefined). I have no idea why it doesn't work. I found many solutions in google, but it still doesn't work.
index.html :
<div ng-class="{'form-group has-success':checkValue(answer) == true,'form-group has-warning': checkValue(answer) == false}">
<input id="422"
maxlength="3"
type="Integer"
class="form-control"
style="width: 100px"
ng-model="answer"
ng-blue="checkValue(answer, id)">
</div>
$scope.checkValue = function(value, id) {
$scope.val = id;
console.log($scope.val);
if ($scope.val == value)
return true;
else
return false;
}
The console just shows:
undefined

with jquery:
(function($) {
$( document ).ready(function() {
var inputId = $('input').attr('id');
console.log(inputId)
});
})( jQuery );
with pure javascript:
var inputs = document.getElementsByTagName("input");
var inputId = inputs[i].id;
console.log(inputId);

You can get the ID by using the following code:
$('ELEMENT').attr('id');
You can also use this code for getting other attributes as class name etc.

You can get the ID by using the following code:
$('.form-control').attr('id');

You can get ID by following code:
var element_id = $("input[ng-model='answer']").attr("id"); //Here I am using other unique property of the element to get its attribute
You can also make use other property also or else you can make use of other Jquery selector like this
var element_id = $(".form-control").attr("id"); //This may give unexpected result if class name is repeated
or
var element_id = $("input.form-control").attr("id"); //This is more assuring way since, we are providing class name along with element name