Shopify is switching dots in product tags to dashes almost everywhere in urls. Except for when you add a custom filter, it pulls original tags with dots instead of dashes, which results in 404 when filtering after dot containing tag was picked.
I want to use JQ for finding and switching dots to dashes in url right after home url.
Google didn't help much.
So, let's say there is a ul
<ul>
<li><a href="http://www.whatever.com/something/tag.with></a></li>
<ul>
How do i find that "something/tag.with" with a help of jq?
p.s.
If somebody can point me to how i change that dot to a dash- that i'd appreciate it very much. But just finding it will help a lot too.
Thank you!
Edit:
<div class="collection-name">
<i class="check-icon"></i> Wool
</div>
And there is also this piece of jquery
$(document).ready(function(){
$("div.collection-name a").each(function(){
this.href = this.href.replace('yarn/', '');
});
$("div.collection-name a").get(0).pathname.replace('.', '-');
})
I've tried adding another this.href = this.href.replace. Didn't work
Figured href is still rendered as a html://whatever.com and so on, so used it as you see above.
So, yeah... Neither one of these 2 worked
first get the value as TML said and then call string.replace method with a regex pattern
var oldurl = $('ul>li>a').get(0).pathname;
var newurl = oldurl.replace(/./i,"-");
The replace line should work like below as well (not tested though)
var newurl = oldurl.replace('.','-');
Just use a regular jQuery selector to find the desired tag, call get(0) on the result of that selector, and get the property pathname from the returned element. For example, the HTML you provided here has only one tag, so it's pretty trivial to select it:
$('a').get(0).pathname
Obviously, in a more complex document, the jquery selector will be a bit more detailed than $('a').
To change all literal '.' (dots) into '-' (dashes), just use normal JS string replacement:
$("div.collection-name a").get(0).pathname.replace('.', '-') works just fine, as you can see from the example code snippet embedded in this answer; further assistance would require you explaining how what has been provided fails to meet your expectation.
console.log($("div.collection-name a").get(0))
$("#found").text( $("div.collection-name a").get(0).pathname.replace('.', '-') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="collection-name">
<i class="check-icon"></i> Wool
</div>
<div>Found the value: <div id="found"></div></div>
</body>
Related
Heyo,
I'm currently stuck with a script. I want to delete a specific word in a HTML tag that I can't change the markup for. I searched for a solution and found this script:
$(':contains("bad")').each(function(){
$(this).html($(this).html().split("bad").join(""));
});
Now this script works fine for one word (bad) but I want to remove mutliple words with this script. So I tryed this:
$(':contains("bad", "good")').each(function(){
$(this).html($(this).html().split("bad","good").join(""));
});
But this doesn't work at all.
Here's a working snippet:
$(':contains("bad")').each(function(){
$(this).html($(this).html().split("bad").join(""));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>A beautiful badsentence</div>
How do I make it work?
Simply .replace(/bad|good/g, ''). Here /g means replace all matches, not just first one. bad|good means replace any of these.
$(document).ready(function () {
$('#text').text($('#text').text().replace(/good|bad/g, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="text">Some words are not as good or not as bad, but bad words may be good too.</span>
you can try this:
var replaced = $('#text').text().replace("good", '').replace("bad", '');
$('#text').text(replaced);
I want to modify the text in a html file using javascript in an android webview.
Essentially, I want to do what android Linkify does to text, but I don't want to do it with java code, because I feel like that might delay the webview rendering the html (if I parse the text before sending it to the webview).
So, for example a piece of html like this:
<html>
<body>
google.com <!--these two shouldn't be linked-->
akhilcherian#gmail.com <!--these two shouldn't be linked-->
<p>www.google.com</p> <!--this should be linked-->
<p>102-232-2312 2032-122-332 </p><!-- should be linked as numbers-->
</body>
</html>
Should become this:
<html>
<body>
google.com
akhilcherian#gmail.com
<p>www.google.com</p>
<p>102-232-2312 <a href="tel:2032-122-332>2032-122-332</a> </p>
</body>
</html>
I already have the regexes to convert numbers and email ids to links, and they're working well enough. What I want to ensure is that I don't link anything that's already within tags. I've removed anchor tags, so they're not an issue, but I also need to avoid linking things like this:
<div width="1000"> <!-- Don't want this '1000' to be linked (but I do want other 4 digit numbers to be)-->
So for example if my regex for links is:
var replacePattern1 = /((https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/gim
How do I make sure that it's not within < and >? (Answers using javascript would be appreciated, but if you feel like this is a stupid way of doing it, please let me know about alternatives).
If you're answering with javascript, this question can essentially be shortened to:
How do I write a regex in javascript to search for patterns which are not surrounded by '<' '>' tags
So if you use JS than mean is client side, your DOM page have free access of all objects of your page coef events.
May be in this step you dont need to use a regex just using DOM.
jquery lib can easy update DOM object.
in your step you want only tag.
So i suggest :
//using jquery
$("p").each(function(){
console.log($(this))
});
//js
var paras = document.getElementsByTagName("p");
for(p in paras){
console.log(paras[p])
}
As i tell you the deal is manipulate the DOM so example with you step dunno if exactly what you try to get :
var paras = document.getElementsByTagName("p");
var hrefs = [];
//what you want to replace in the loop of p
var json_urls = {"links":["http://", "tel:"]};
for(p in paras){
//copy of text content of your p
var text_cp = paras[p].textContent;
//delete the p[i] content
paras[p].textContent = "";
//create element dom a
hrefs[p] = document.createElement("a");
//i add attribute id with some affectation unique
hrefs[p].id = "_" + p;
//add attribute href to a with some affectation replace + content
hrefs[p].href = json_urls.links[p] + text_cp;
hrefs[p].textContent = text_cp;
paras[p].appendChild(hrefs[p]);
}
I have a html code inside string
string_eng += '<b>Year Bonus</b> - bonus for each year</br></br>';
And I want to put this inside textarea, but when I do it, the result is:
- bonus for each year
It simply deletes all things inside the html tags. I just want to show all the code inside the string. I already tried <xmp>,<pre>, but none of them worked.
Thanks for any help.
EDIT.
Code with which I input data from the array to the textarea/code.
$('body').append('<code class="code_text"></code>');
for(var i=0; i<tag_list.length; i++){
var string='';
string+='---------------------------------------------------------------------------------\n';
string+='tag: '+tag_list[i][0]+'\n';
string+='nazwa_pl '+tag_list[i][1]+'\n';
string+='nazwa_eng '+tag_list[i][2]+'\n';
string+='tekst_pl '+tag_list[i][3]+'\n';
string+='tekst_eng '+tag_list[i][4]+'\n';
string+='\n\n\n';
$('.code_text').append(string);
}
I tried this using jsfiddle:
HTML
<textarea id="code"></textarea>
JavaScript
$(document).ready(function() {
var string_eng = '';
string_eng += '<b>Year Bonus</b> - bonus for each year</br></br>';
$("#code").html(string_eng);
});
Output (contained in textarea)
<b>Year Bonus</b> - bonus for each year</br></br>
Try it here: http://jsfiddle.net/UH53y/
It does not omit values held within tags, however if you were expecting the <b></b> tags to render as bold within the textarea, or the <br /> tags to render as line breaks, this wont happen either. textarea does not support formatting.
See this question for more information: HTML : How to retain formatting in textarea?
It's because you're using the jQuery .append method which seems to parse the string and insert it afterwards. I don't know jQuery at all, so there might be another special jQuery method, but here is a simple fix:
$('.code_text').append(document.createTextNode(string));
Edit:
I just read and tried the answer of Salman A. The "special jQuery method" exists and he used it. You can use this:
$('.code_text').text(string);
I am looking around on the web but I am not finding anything useful. :(
I am having a problem that I don't understand. I am sure that I am doing something wrong, but I don't know well the syntax of jQuery to understand what is that I am not doing right.
I am using animations with JS and CSS 3, and I am having troubles with empty spaces between the words, and to solve this problems I have to find a way to substitute chars inside a string of text with something else. Like an empty space with a , or as a test that I was trying to do a "n" with a "xxxxx".
What I think that I am doing is:
when the page is loaded
Modify the string of any paragraph with the class .fancy-title that contains "n" with a text "xxxxx"
So:
$(document).ready(function(){
for(i=0; i< myLength+1; i++){
var charCheck = $(".fancy-title").text()[i];
if(charCheck == "n"){
charCheck.replace("n", "xxxxxxxx");
}
}
});
But I receive an error that it said:
charCheck.replace("n", "xxxxxxxx"); it is not a function
I am using jquery
and other scripts that are based on jquery to make animations, rotation and scaling... and they are all in the HEAD with jquery first to load.
What am I doing wrong? Manipulation in jQuery does it need a specific .js extension? I understood that was in the basic capability of jQuery, and looking at other examples all creates me the same kind of error.
I even tried
if(charCheck == "n"){
$(".fancy-title").text()[i] == " "
}
But simply the modification it is not applied on the page. I tried with innerHTML as well :(
I feel so incompetent...
Thank you in advance for any help.
$(document).ready(function(){
$(".fancy-title").each(function(i){
var text = $(this).html();
$(this).html(text.replace(/ /g, " "));
})
});
You have no problem with the replace part :).
$(document).ready(function(){
$(".fancy-title").each(function () { //for all the elements with class 'fancy-title'
var s=$(this).text(); //get text
$(this).text(s.replace(/n/g, 'xxxxxxxx')); //set text to the replaced version
});
});
Just a quick example, hope it works.
Have you tried the css style white-space:pre instead of replacing ' ' with ' '?
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
It seems you are trying to replace a single character with a new string.
You might be able to get the right result by dropping the iteration and simply call .replace on the jQuery-object.
If I have a bunch of links like this:
blah and this one and here is another .
How would I add a class to all the links that link to foo.com?
to make sure you get http://foo.com, http://bar.foo.com/about, and not http://bazfoo.com, try:
$("a[href*='/foo.com'], a[href*='.foo.com']").addClass('your_class');
Here's a stronger solution with regular expressions, this is probably slower, mind you, but checks the domain is on the start:
$("a").filter(
function(){
return $(this).attr('href')
.match(/^https?:\/\/([^/]*\.)?foo\.com(\/.*|$)/i);
})
.addClass('your_class');
Here are some test cases: http://jsbin.com/oruhu
(you can edit it here: http://jsbin.com/oruhu/edit ).
If you have links to distinct pages on the foo domain like:
<a href="http://foo.com/eggs.html">
<a href="http://foo.com/bacon.html">
then you can use a selector like this:
$("a[href^=http://foo.com/]").addClass("newClass")
which will find all links that start with "http://foo.com/"
or
$("a[href*=/foo.com/]").addClass("newClass")
which will find all links that contain "/foo.com/"
$("a[href='foo.com']").addClass('your_class')
Trivially:
$("a[href='http://foo.com']").addClass('foo');
But that assumes an exact match on the URL.