I am close to getting this function working, but not quite there yet.
The basic logic says find any p element that contains "+", strip the "+" from the text and try and replace the existing content with the new content and add a class.
Initially I had all of the matched elements being returned and concatenated into a single paragraph. So I tried to create an each function. I am now seeing the right results in the console, but I am not sure how to replace the content for the matched paragraph only (using $(this)).
I've made a fiddle here: http://jsfiddle.net/lharby/x4NRv/
Code below:
// remove bespoke text and add class
$qmarkText = $('.post p:contains("+")').each(function() {
$qStr = $(this).text().slice(1);
$qmarkText.replaceWith('<p class="subhead-tumblr"' + $qStr + '</p>');
console.log($qStr);
});
I know that $qmarkText is not quite but not sure how to fix this, have tried several variations.
Hopefully someone can help me out.
You could use following snippet:
// remove bespoke text and add class
$qmarkText = $('p').filter(function () {
return $(this).text().substring(0, 1) === "+"
}).each(function () {
$qStr = $(this).text().slice(1);
$(this).replaceWith('<p class="subhead-tumblr">' + $qStr + '</p>');
});
DEMO
This avoid using :contains() which will match even character '+' is inside content text, not only at the beginning.
Related
I am new to webDevelopment. I have a string , and I want to highlight some part of the strings like 10-15 things I want to highlight. Now I do have the offsets as well, like start and end of the text which I want to highlight from that string. SO, When in the loop first gets highlighted then it adds the span tag there with class mark, because of this the indexes are getting changed, then when it try to highlight the second then it does not get the perfect match because the offsets are now changed. So, How Can I match the exact text with the span tags or without that ?
$scope.highlight = function(content,startoffset,endoffset){return content.replace(content.substring(startoffset, endoffset), '<span class="' + className + '">$&</span>');}
.mark {background-colour = yellow;}
Can any please help me with this, This is really getting messy for me.
Refer this https://plnkr.co/edit/j5VCCjCHN60l0QNSTtLo?p=preview. I replaced your mark up with "**" as it is easy to show sample example.
function stringReplace(content, startoffset, endoffset, previousOffset) {
_temp = _temp.concat(content.substring(previousOffset || 0, startoffset));
_temp = _temp.concat('**');
}
I want apply my JS on all my Textarea
$_PAGE->addJSOnLoad("
$('#textarea').keyup(function() {
var nombreCaractere = $(this).val().length;
var msg = nombreCaractere + ' caractére(s)';
$('#compteur').text(msg);
'<span id=compteur>' 0 caractére(s)'</span>';
});
");
This code is in constructor of my class textarea I wnat call him 1 times for all textarea
You should change the jquery selector from $('#textarea') to $('textarea') so as to target all textarea in the document.
Also you may want to use $('.compteur') in place of $('#compteur') so that your can have multiple counters, one for each textarea. Do not forget to update your html correspondingly
Edit: Please use $(this).find('.compteur') in place of $('.compteur') so that only the counter within the current textarea is affected
$('#textarea')
selects a HTML element with the ID "textarea". So this will be at max one textarea-element. The selector for all textareas would be just
$('textarea')
javscript event handlers can take a parameter (Event), so
$('textarea').keyup(function() {
var nombreCaractere = $(this).val().length;
var msg = nombreCaractere + ' caractére(s)';
// code for display, todo!
}
would put the event handler on every textarea (<textarea>) on your page. However, the display for the character count is a bit more difficult, unless it's one fixed element that scrolls along.
but let's say, your textareas all have an attribute data-charcount="[id]" that has the id of a div or something, that will display the character count.
Then you could replace
// code for display, todo!
with
$("#"+this.dataset.charcount).text(msg); // <- assuming this works
and your example textarea should look like this:
<textarea data-charcount="compteur"></textarea>
<span id="compteur"></span>
please note: every id should only appear once!
edit replace event.target with this, and fixed small error with string concat
This is similar to other questions, but it's about something specific.
The first example doesn't do anything (breaks)
The second example works except that it hacks up html tags (specifically a tags) as well, so href="something with numbers" get hashed and then the whole thing falls apart
Then I get anchors that have their href attributes hashed up with span tags. Obviously that isn't what I want. What am I doing wrong? There must be some way to put all numbers and ", - : ()" inside a span without hashing up the html tags themselves.
$('#main-content p').contents().not("a").html(function(i, v) {
return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});
$('#main-content p').html(function(i, v) {
return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});
You are replacing all number. You need to only select the text nodes within the element. This code is not tested, but should work.
EDIT: You have to also call .contents(). See this answer
EDIT 2: I got it working in this FIDDLE. Let me know what you think. Did you mean to replace special characters as well as numbers?....because that is what is currently happening per your original regEx.
$('p').contents().filter(function () { return this.nodeType === 3; }).each(function(){
$(this).replaceWith($(this).text().replace( /([0-9(),-:]+)/g ,
'<span class="number">$1</span>'));
});
I am trying to remove specific CSS selectors, and if there is no more selectors for a list of properties than the script removes it...
I was able to get a part of the script working: http://jsfiddle.net/jnbdz/MarRr/5/
Here is the code:
$$('button')[0].addEvent('click', function(){
var css = document.id('css').get('text');
var newCss = css.replace(/(\n|\r|\s\s)/g, "")
.replace(/(,\s*body\s*(?={)|,\s*body\s*(?=,)|body\s*,|,\s*head\s*(?={)|,\s*head\s*(?=,)|head\s*,)/gi, "")
.replace(/(body\s*(?={)|head\s*(?={))/gi, "")
.replace(/(^\{[^}]*?\}|\}\s*\{[^}]*?\})/gim, "");
document.id('cleancss').set('text', newCss);
});
The problem is that if I remove the line breaks the script I wrote wont be able to remove the properties that are not related to any selectors...
If I keep the line breaks it works...
Also, I would like to know from coders that are good with ReGex if my code is good...
Thanks a lot in advance for any help.
In the last replace you're using the multiline flag. That can't work, if you have only one line, which you do after the first replace. So lets keep the linebreaks first and remove them after the removal of the selectors.
You also can simplify the regexes a bit. Use x(?=a|b) instead of x(?=a)|x(?=b). You also don't need the lazy match [^\}]*?.
Below is a working example. For clarity I only removed the body selector.
$$('button')[0].addEvent('click', function(){
var css = document.id('css').get('text');
var newCss = css
// replace multiple tabs or spaces by one
.replace(/( |\t)+/g, " ")
// remove space at beginning of line
.replace(/(^\s)/gm, "")
// remove body in selector lists
.replace(/(,\s*body\s*(?={|,)|body\s*,)/gi, "")
// remove body before {
.replace(/(body\s*(?={))/gi, "")
// remove rules without selector
.replace(/[\n\r]+\{[^\}]*\}/g, "")
// remove linebreaks
.replace(/[\n\r]+/g, "");
document.id('cleancss').set('text', newCss);
});
You could further compress the stylesheet by removing spaces in front of { or after : and ,
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.