Alright. I've span elements like below in my page.
<span class="Jens">Bill Gates</span>
<span class="noJens">Martin Reid</span>
<span class="Jens">Jeff Bezos</span>
<span class="Jens">Mark Zuckerberg</span>
<span class="noJens">Nameless Dude</span>
<span class="Jens">Jack Ma</span>
<span class="Jens">Larry Ellison</span>
I wanted to get all span values with the class name as Jens & need to separate the values with some space or break.
I managed to get the values by giving the following code. But how to separate each entry with a space or a break?
$("span[class='Jens']").text(); //Outputs Bill GatesJeff BezosMark ZuckerbergJack MaLarry Ellison
I can achieve desired output by iterating over each elements. But Is there a way I can separate each entry with a space or \n in a single statement like above?
You can get them comma seprated using:
$('.Jens').map(function() { return $(this).text(); }).get().join();
Working Demo
For joining them with \n pass parameter \n in join method:
Syntax for join: array.join(separator)
$('.Jens').map(function() { return $(this).text(); }).get().join("\n")
Working Demo with \n
Related
I was trying to set values into Angular js Ui grid based on the row.entity values.To do that i have created cellTemplate that check the row values and based on values i did some text styling.
Code Snippet
var statusTemplate='<div>
<span class="txt-color-yellow" ng-if=row.entity.status.name=="Draft">{{row.entity.status.name}}</span>
<span class="txt-color-orange" ng-if=row.entity.status.name==[
"AwaitingReview"]>{{row.entity.status.name}} </span><span
class="txt-color-green" ng-if=row.entity.status.name=="Reviewed">{{row.entity.status.name}}
</span><span class="txt-color-blue" ng-if=row.entity.status.name==[ "Ready ForScripting"]>{{row.entity.status.name}}</span><span
class="txt-color-brown" ng-if=row.entity.status.name==[ "Awating
ScriptReview"]>{{row.entity.status.name}}</span><span
class="txt-color-green" ng-if=row.entity.status.name==[ "ScriptReviewed"]>{{row.entity.status.name}}</span><span
class="txt-color-green" ng-if=row.entity.status.name=="Closed">{{row.entity.status.name}}</span>
';
But the problem was in ng-if when trying to check text values with spaces it throws an exception saying Unterminated quote at columns 25-34 ["Awaiting] in expression [row.entity.status.name==["Awaiting]. etc....
Please let me know how can i check the text with spaces in ng-if.
Change it in all div where write like string pass in the single '' and condition write in double quote ""
ng-if="row.entity.status.name=='Draft'"
You have to put the condition in ". So following should help.
ng-if="row.entity.status.name=='Draft'"
You should have quote for ng-if, Try this ng-if="row.entity.status.name==[\"Awaiting Review}\"]"
Try this ng-if="row.entity.status.name==\'Draft\'"
I want to replace the "word" that is outside "span", and keep the other that is inside "span". By now, the following code works when both are following "mark>" and followed by "span". But I want to go further, following "mark>" OR being followed by "span", any one of the two condition should cause replacing action.
var replaceString = "newWord";
var htmlString = "This <span style='color:red' title='mark'>normal word</span> need no change. This word is to be replaced. <span>Another word</span> need no change.";
var reg=new RegExp("(?!mark>)"+replaceString+"(?!<\/span>)","gi");
var bb=htmlString.replace(reg,replaceString);
alert(bb)
// Final result should be "This <span style='color:red' title='mark'>normal word</span> need no change. This newWord is to be replaced. <span>Another word</span> need no change.";
UPDATE: using title as mark. adding starting tag span
UPDATE: Follow the suggestion below, I'm trying to solve the problem in anohter way, see here: js regex: replace words not in a span tag
Would you be comfortable using another span tag ?
By putting a class name inside it, you should be able to change the words you need to change by changing the content of every span containing that class.
Something like :
This <span style='color:red' mark>word</span> need no change. This <span class='changeMe'>word</span> is to be replaced. Another word</span> need no change.
And a jQuery script going
$('.changeMe').text("newWord")
If you still want to use Regexp, for an OR condition, you might just do it twice :
var reg=new RegExp("(?!mark>)"+replaceString,"gi");
var bb=htmlString.replace(reg,replaceString);
reg=new RegExp(replaceString+"(?!<\/span>)","gi");
bb=htmlString.replace(reg,replaceString);
You are looking for negative look-aheads (or Lookbehinds) which JS, unfortunately, doesn't support. Check http://www.regular-expressions.info/javascript.html
You may try the following Regex:
var reg = new RegExp('[^(mark>)]word[^(</span>)]', "gi")
htmlString.replace(reg, " newWord "); //Check the spaces
I would rather suggest using JS to get DOM elements and replace text iterative-lly (not sure if it's a word, even a jargon).
HTH
I have elements like this all over the page:
<span class="am-product-terms">$49.95 for each 3 months</span>
<span class="am-product-terms">$149.95 for each year</span>
I wanted to remove the the for... part all up to the end. So I did this:
$('.am-product-terms').replace(/for[\s\S]+/, '')
That threw an error so I tried this:
$('.am-product-terms').text().replace(/for[\s\S]+/, '')
This didn't work either.
.replace() returns modified string it doesn't update existing text. You need to use returned string and reset it to inputs text.
You can use .text(function)
$('.am-product-terms').text(function(_, text){
return text.replace(/for[\s\S]+/, '');
});
I have a div with a class name (.product) and what i want to do is find multiple different words and for each word append/replace them with a href link or span etc.
There would be multiple different words to append to so it would most likely be a foreach run.
I have tried the code below but just cant get it to stick as its only replacing the whole last word variable in the script.
jQuery('.product').each(function(){
var word1 = jQuery(this).text().replace(/word1/g,"<span>word1</span>");
jQuery(this).html(word1);
});
jQuery('.product').each(function(){
var word2 = jQuery(this).text().replace(/word2/g,"<span>word1</span>");
jQuery(this).html(word2);
});
If this is not possible with jQuery/JS, what about php, how would I scan through a database text area value/content and replace foreach variable(word) and replace with href link?
Any help would be appreciated.
cheers
Your attempt looks good, it is just missing one bit. Rather than changing the text and pushing it into the HTML, try changing the text in the HTML and pushing the HTML back ... and put correct html in (</span>) ...
jQuery('.product').each(function(){
var word1 = jQuery(this).html().replace(/word1/g,"<span>word1</span>");
jQuery(this).html(word1);
});
jQuery('.product').each(function(){
var word2 = jQuery(this).html().replace(/word2/g,"<span>word1</span>");
jQuery(this).html(word2);
});
I suppose you're wanting to wrap words with <span> tag. You can do the below using html with function overload and replacing words with regex. $0 means the matched word.
jQuery('.product').each(function() {
$(this).html(function() {
return $(this).text().replace(/\w+/g, "<span>$0</span>");
});
});
I have to match a string that is not inside tags. I am working on projects that I don't have control over the back-end html rendering code. What I need to do is add a hover functionality for multiple dynamic words. I created a script that will look for those key words in specific elements and add their description in title tags for the hover. My problem is that if other keywords are found in other keyword's title tags.
My JS:
var str = 'match <span title="not match here">match</span> match';
str.replace( /match/gim, 'ok' );
I do not want the "match" word in the title attribute to be replaced, my desired result is:
'ok <span title="not match here">ok</span> ok'
how can I do that with Javascript?
I tried the expression below but it's not working for me:
^((?!(".+")match)*$
You need to capture tags first to be able to avoid them:
var result = str.replace(/(<[^>]*>)|match/gi, function (_,g1) {
return (g1==undefined)? 'ok':g1;
});
But if you can, using the DOM is probably the best way.