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);
Related
I want to remove/hide a piece of text that loads on my page.
The element doesn't have an id to relate to so I want to use a text-specific method.
Let's say the text is:"remove this line of text".
The html looks like this:
<div class="aClassName">
<p>
<strong>remove this line of text</strong>
... the rest of the content.
</p>
I have tried the following:
jQuery(document).ready(function($){
document.body.innerHTML = document.body.innerHTML.replace('remove this line of text', '');
});
Didn't work. So I tried this:
jQuery(document).ready(function($){
$("body").children().each(function () {
$(this).html( $(this).html().replace(/remove this line of text/g,"") );
});
});
Didn't work. The idea is that after the page is loaded it removes the line.It doesn't produces any errors as well. Not even in the firebug.
Anyone?
Target Elements Based On Their Content
You could accomplish this using the :contains() pseudoselector in jQuery that would allow you to target certain elements based on their contents :
$(function(){
// This will remove any strong elements that contain "remove this line of text"
$('strong:contains("remove this line of text")').remove();
});
You can see a working example of this here.
Broader Approach (Just Targets Elements Based On Selectors)
If you wanted a more simply target it by a more general selector (i.e. any <strong> tags that appear beneath a class called aClassName :
$('.aClassName strong').remove();
You can see an example of this approach here.
I guess you can use find() and text(), i.e.:
$('.aClassName').find('strong').text("123");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="aClassName">
<p>
<strong>remove this line of text</strong>
... the rest of the content.
</p>
Or simply:
$('strong:contains("remove this line of text")').text("New text");
Update:
After analyzing the link supplied on the comments, you can use the following:
$('.payment_method_mollie_wc_gateway_ideal').find('strong').text("");
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>
I am wondering how I would remove the vowels from a word on a button click?
Here is what I am trying to do - http://www.marcia.bnmla.com/~marcia/project0.html
I need to use jQuery to remove the vowels in the second box so it displays only consonants when you click the button. I have it where it displays "MRC" as text when the button is clicked and I need to redo it using string manipulation so I can change the word to anything in my code and it will remove the vowels in that word. I am obviously new at this. Please help me!
Here is my code:
<div id="marcia_box">
<p id="marciatext">marcia</p>
<div id="marcia_boxBtn"><button id="marciaBtn">Marcia</button></div>
</div>
$("#marciaBtn").click(function() {
$("#marcia_box").css("background-color","#999");
$("#marciatext").html('mrc');
});
Do you really need jQuery? What about plain old JavaScript?
"abcdef".replace(/[aeiou]/gi, "") // => "bcdf"
How's that?
jQuery allows you to pass a function to .html, which should return a new HTML string. jQuery will pass the old HTML, so you can do something like this:
$("#marciatext").html(function(i, current) {
return current.replace(/[aeiou]/g, "");
});
demo
This one will help you now and in the future for other transformations
specially for toggling between two array keys
var c=0, text=['marcia', 'mrc'];
$("#marciaBtn").click(function() {
$("#marciatext").html( text[ ++c%2 ] );
});
As shown by Jarrett Meyer, removing the vowels has nothing with the jQuery part. But just to show you how to put it together with jQuery (since you said you is really new in it), here is a sample:
$("#marciatext").text($("#marciatext").text().replace(/[aeiou]/gi, ""));
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.
..I suppose because the html has script tags :-/
<script type="text/javascript">
$(document).ready(function() {
$('.ad_slot').html('<scr'+'ipt type="text/javascript"><!-- amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600"; //--></scr'+'ipt>');
});
</script>
<div class="ad_slot"></div>
without the script tags the html displays fine. Is there any way to make this work with the tags included?
I need to generate a full js code using js for a project I'm working on.
I've also added the code to jsFiddle http://jsfiddle.net/c68wu/ although I'm not sure if scripts will show in the result window.
Script tags are going to be stripped out if you attempt to add them with html. Use
jQuery.getScript() instead.
Try to escape slash in the closing script tag:
$('.ad_slot').html('...<\/script>');
You'll need to escape the forward slashes:
$('.ad_slot').html('<scr'+'ipt type="text\/javascript"><!-- amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600"; \/\/--><\/scr'+'ipt>');
Or this:
$('.ad_slot').html('<script type="text/javascript">amazon_ad_tag = "xxxxxxxx-xx"; amazon_ad_width = "160"; amazon_ad_height = "600";</script>');
I removed the HTML comment tags and the + in script tags. Oh yeah, and I removed the escaping on the slashes...not needed.
Also, you may want to look at when your script to generate the ads is being loaded and run. I suspect it's run before and never sees this code.