jQuery append hrefs to mulitple words in div - javascript

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>");
});
});

Related

js regex: replace a word not follows or not followed by a certain word

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

Javascript regular expression prevent matching inside tags

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.

Can I insert some string at every other line using javascript?

Let's say I have a large wall of text that I've pasted onto my page inside a div with id "story". Each paragraph is actually on a single line in the html file, and each paragraph is separated by a single line. I want to make the wall of text more readable using bootstrap. I've set the css in a blog like format, is there any way to dynamically add </p><p> at every paragraph separation?
var paragraphs = "your text".split(/\n\s*\n/);//since paragraphs are separated by
for(var i = 0; i < paragraphs.length; i++){ //a line, we need two \n here.
var p = document.createElement("p");
p.innerHTML = paragraphs[i].trim();
document.querySelector("#story").appendChild(p);
}
//==============
//To get the text of an element (with new lines), you can do this:
document.querySelector("#story").childNodes[0].wholeText;
Maybe something like this? http://jsfiddle.net/DerekL/qv2GZ/
What you shouldn't do is replacing text inside a string and dumping it right into DOM. That's bad practice. That's why here I'm creating a p element instead of replace lines with </p><p>.
I think that you should take a look here:
How do I replace all line breaks in a string with <br /> tags?
And here: How to replace all occurrences of a string in JavaScript?
Remember that new line is simply \n. Then it is a matter of simple string replace. There is a huge research about it, and the question is a possible duplicate, so I think that is enough to answer :).
Best regards!

Javascript : Replace Detect a string and replace html in a div after changing color

I am trying to change color of a part of strings. I have a list of DOM elements, and for each of them, the text can contain some hashtags. I would like to put in color all hashtags words which could be found in the text.
Here is the begin of the code :
var listOfText = document.getElementsByClassName("titleTweet");
for (var nodetext in listOfText) {
var divContent = listOfText[nodetext].innerHTML;
if (divContent.indexOf("#") !== -1) {
// Do job here
}
}
For example, divContent can be equals to "Hello my #friends ! How are you ?"
I would like to update the dom elements to put in red color the word "#friends".
I don't know how to do that using javascript or jQuery.
You can use a regexp to find the hastags and wrap them with html. Then use the .html() method to replace the original element's html with the new string.
Example snippet
$('#myDiv').replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
Working example - http://jsfiddle.net/4p4mA/1/
Edited the example to work on all divs on the page.
Note: This will only work so long as your element only contains text, because it is replacing all the child nodes with its text value.
use regex for this, find text having hashtag and replave that in span tag for each element.
$('.titleTweet').each(function(){
var $this=$(this);
$this.html($this.text()
.replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
});
See demo here
.innerHTML is a poor basis to starting replacing text. You'll want to navigate down to the text nodes and use .nodeValue to get the text. Then you can start splitting up the text nodes.

Get specified texts in a div, than search for them in a different div

I am trying to get texts from a div, than i want to search for these titles on the same page, but in a different div. And if one of the title exist there, i want to put some text after it. I tried to do it, but i don't know what is the problem. Last time i tried it with this jquery code:
var cim = $.trim($('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3").text());
jQuery.each(cim, function(X) {
$("ul.s_hir.show li.hir a:contains(X)").find("small").append(" (Új!)");
return (this == cim.length);
});
As you can see i put the texts what i wanted to 'cim'(it is working). Than i tried (line 3) to check if one of the 'ul.s_hir.show li.hir a' contains one of the text, and if it containes, i put (append) something in the small tag (there is a small tag inside a tag : Text..)(this is not working). I tried it in more ways, but none of them worked.
If i write:
$("ul.s_hir.show li.hir a:contains(a)").find("small").append(" (Új!)");
than it will put ' (Új)' after every small tag when the a contains a character. So it looks like the problem is how i want to check if it a contains one of the text.
Oh, and i can get more than whan text for example: 'I am new' and 'Oh, hello darling' and only one of them contains *ul.s_hir.show li.hir a*
I'm not sure I have fully understood what text you want to search, but I see several problems:
your cim var is a single string: as jQuery docs explains, the result of the .text() method is a string containing the combined text of all matched elements http://api.jquery.com/text/ . So if you have multiple elements matched with your selector, cim will be a string of all text concatenated.
jQuery.each() iterate on each character of cim, and X is the index of the character in the string, not the value
in your third line, X is not evaluated as a var because it's in double quotes.
I don't understand what you're expecing with return (this == cim.length) : you're comparing a number (cim.length) with a string (the value of each currently evaluated).
Try something like this:
// titles contain all the h3 elements you're searching
var titles = $('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3"));
// you're iterating on each title
jQuery.each(titles, function(index,title) {
// you're searching links elements containing each title text
var text = $.trim($(title).text());
$("ul.s_hir.show li.hir a:contains("+text+")").find("small").append(" (Új!)");
});

Categories

Resources