I want to replace the HTML attribute double quote with single quote. For example:
If the input is:
<a onclick="Track("http://www.example.com")">Track Me</a>
The output will be:
<a onclick='Track("http://www.example.com")'>Track Me</a>
Here the onclick="Track("http://www.example.com")" needs to be replaced with onclick='Track("http://www.example.com")' i.e the only change here is onclick="..." is replaced with onclick='...'.
In my case the content is retrieved from an HTML editor whose content needs to be cleaned in client side using JavaScript. The only way I can currently think of is I need to use Regex to replace the onclick double quote attribute with single quote attribute and it should only happen when "Track" function is used in onclick attribute.
I have tried something like: jsFiddle
I am looking for any solution. Any help is highly appreciated.
Thanks.
If you cann't change others,then change yourself.
so here we go:
var str = '<a onclick="Track("http://www.example.com")">Track Me</a>';
console.log(str.replace(/onclick="Track\("([^"]+)"\)"/, 'onclick=\'Track("$1")\''));
If You are still looking for regular expression, You can use this example. It will give You that link <a onclick="Track('http://www.example.com')">Track Me</a>
var s = '<a href="#" target="_blank"
onclick="Track("http://www.example.com/")">Test Link</a>';
var p = s.replace(/(onclick=")(.*)(\")/,function(match,prefix,handler,suffix){
return prefix + handler.replace(/"/g,'\'') + suffix;
});
console.log(p);
And fiddle for demo;
I did not see, that You look for version <a onclick='Track("http://www.example.com")'>Track Me</a>, so you can change above code with this line
var p = s.replace(/(onclick=")(.*)(\")/,function(match,prefix,handler,suffix){
return prefix.replace(/"/,'\'') + handler + suffix.replace(/"/,'\'');
});
Related
Basically, I'm trying to replace a part of url in the middle ('#') with another one, and remove first part of url. Script replaces '#' with no problem but rfuses to remove the first part of url. Am i doing something wrong, or is there another solution for that?
html of it
<a class="link_imagelibrary" href="#pink_yellow_flowers.pdf?5612">Download pdf set</a>
on condition changes to
<a class="imgdownload" href="http://www.picturewall.com/pages/Botanicalhttp://#.com/s/files/1/0183/2687/files/passpink_yellow_flowers.pdf?5612">Download pdf set</a>
jquery
$(".imgdownload").each(function(){
this.href = this.href.replace('#', 'http://#.com/s/files/1/0183/2687/files/pass');
this.href = this.href.replace('http://www.#.com/pages/botanical', '');
});
It's supposed to happen on condition. Judging that the rest of the script works fine on the condition- looks like the problem is somewhere here
This line is not being matched
this.href = this.href.replace('http://www.picturewall.com/pages/botanical', '');
because it doesn't exist in your href: (Note the capitalisation of 'Botanical')
"http://www.picturewall.com/pages/Botanicalhttp://cdn.shopify.com/s/files/1/0183/2687/files/passpink_yellow_flowers.pdf?5612"
The href is expanding with this.href, so while you have:
<a href="#" ...
The DOM element's href property gets this:
<a href="http://example.com/your/page/wherever.php#" ...
The easiest way to handle this is to do it differently:
$(".imgdownload").each(function(){
this.href = 'http://cdn.shopify.com/s/files/1/0183/2687/files/pass' +
this.href.split('#').pop();
});
Here is a demonstration of the "problem":
$('a').each(function ea(){
console.log(this.href, this.getAttribute('href'));
});
http://jsfiddle.net/Gtr8V/
You'll note that element.getAttribute('href') does return the raw href attribute value, not the property. You could use this with .replace() instead of the this.href.replace() you were trying.
<nav class="woocommerce-breadcrumb">Home > Product</nav>
Using jQuery or Javascript how would I be able to rename the word 'Product' to some other value?
var brandname = $('.tax-product_brand h1.page-title').text();
var crumb = $('.woocommerce-breadcrumb').text();
console.log(crumb);
crumb.replace("Product", brandname);
I tried the above with no luck
Use .html() rather than .text() or else you'll lose your markup:
var crumb = $('.woocommerce-breadcrumb').html();
Then apply the value back to the element:
$('.woocommerce-breadcrumb').html(crumb.replace("Product", brandname));
Alternatively, a much easier way would be to put "Product" in its own element, and then just replace that element's text:
<nav class="woocommerce-breadcrumb">Home > <span class="item">Product</span></nav>
Then your jQuery would simply be:
$(".woocommerce-breadcrumb .item").text(brandname);
You then need to insert your string into the DOM. As it is, you're just doing a string operation and discarding the return value.
$('.woocommerce-breadcrumb').text(crumb.replace("Product", brandname));
EDIT: As mentioned in a comment, you should use .html() instead of .text(). .text() will strip all of your HTML, i.e. your <a> tag.
.replace returns a new string, so you have to set the text of crumb with the returned string.
Its replaced Here is demo.
var brandname = 'My Name';
var crumb = 'My Product';
console.log(crumb);
var d= crumb.replace("Product", brandname);
alert(d);
var brandname = $('.tax-product_brand h1.page-title').text();
$(".woocommerce-breadcrumb:contains('Product')").html(function(_, html) {
return html.replace(/(Product)/g, '<span>'+brandname+'</span>')
});
I was able to use the above to gain what I wanted whilst keeping the formatting of the a tag
Avoid using free text. This will increase processing overhead, when you'll do DOM calculations.
It is good, if you can use tag to display the end product/page name.
The html will look like:
<nav class="woocommerce-breadcrumb">
<a href="http://domain.com/" class="home">
Home
</a>
<span class="currentPage">>Product</span>
</nav>
Now, you can use simple DOM operation to change the text() of expected element.
var currentPage=$(".currentPage");
$(currentPage).text('> NewText');
...
results += "href=" + "JavaScript:" + "decrement(" + "'" + requestList[i].name + "'" +")>";
...
document.getElementById("demo").innerHTML=results;
The problem is when in the requestList[i].name is a string with more than 1 word, but with 1 word it works.
And when i inspect element in chrome and firefox, it only appears this:
Example: requestList[i].name = "John travolta";
<a href='JavaScript:decrement("John" travolta")>
And when i hover my mouse over the element:
JavaScript:increment("John
Any idea?
Try this:
results += "href=\"JavaScript:decrement('" + requestList[i].name + "')\">";
Your concatenation is confusing. Try to simplify it. Escape the " with \" in order to use ' inside it, so your text will be nice no matter how much spaces it haves. The result will be:
href="JavaScript:decrement('John Travolta')">
So now you have to add the rest of your tag. Just a tip: Try to use your a tag with custom click like this:
href="javascript:void(0)" onclick="decrement('')"
I hope it helps. Good luck.
If you console.log(results), you will see something like this:
<a href=JavaScript:decrement('John Travolta')>
Does this look like valid HTML to you? ;) Put quotes around attribute values.
You have a syntax error here
<a href='JavaScript:increment("John" travolta")>'
remove the quote mark between 'John' and 'travolta'
I have a string which is a simple <a> element.
var str = 'Link'
Which I want to turn into:
Link
I can remove the </a> part easily with str.replace("</a>", "")but how would I remove the opening tag <a href="somewhere.com>?
Use unwrap like
$('a').contents().unwrap();
But it work with the elements that are related to DOM.For your Better solution try like
str = ($(str).text());
See this FIDDLE
This will strip the whole tag:
str.replace(/<[^>]+>/g,'');
And this just the first part:
str.replace(/<[^/>]+>/g, '');
Since you are using jQuery, you can do it on the fly as follows
$('Link').text()
Can you try this,
var str = 'Link';
alert($(str).text());
I have html like so:
<div class=foo>
(<a href=forum.example.com>forum</a>)
<p>
Some html here....
</div>
And I want to insert another link after the first one, like so:
<div class=foo>
(<a href=forum.example.com>forum</a>) <a href=blog.example.com>blog</a>
<p>
Some html here....
</div>
...but because it is enclosed in () I cannot use:
$('div.foo a:first').append(' <a href=blog.example.com>blog</a>');
...which would place it before the ).
So how can I extend my jQuery selection to select the literal ) or do I need to use another solution?
You can either match and replace the whole (<a />) string, or place another element (such as a span) around the whole thing.
<span>(<a href=forum.example.com>forum</a>)</span>
Append is also inserting the new anchor tag inside the existing anchor. You'll probably find you're looking for after()
Could you possibly select the next <p> tag and prepend (actually...use the before method) the link?
$('div.foo a:first').next('<p>').before(' <a href=blog.example.com>blog</a>');
One should never modify XML/HTML (especially untrusted/illformatted) by regular expressions, but if you are really desperate:
var container = $('div.foo');
var append = '...';
var html = container.html();
var replaced = html.replace(/\(<a [^\)]+\)/, "$& " + append);
container.html(replaced);
Note that the above will fail if you have ")" character inside a-tag.