Replacing URLS with Hyperlinks - javascript

I found the following function:
function addHyperlinks(str) {
// Set the regex string
var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig
// Replace plain text links by hyperlinks
var replaced_text = str.replace(regex, "<a href='$1' target='_blank'>$1</a>");
// Echo link
return replaced_text;
}
Which works okay, however when there is a dash in the URL it stops processing there. So for instance, the following URL:
http://website.com/some-internet-page
Will get replaced with:
<a href='http://website.com/some'>http://website.com/some</a>-internet-page
I'm not good with regex, could anyone help modify the above so that this doesnt happen?

#Tonny said it in the comments above:
/(https?://([-\w-.]+)+(:\d+)?(/([\w-/_.]*(\?\S+)?)?)?)/ig
Thank you!

Related

Using exec to find multiple matches fails when we are trying to replace with the match itself

I want to replace the sequence ab with a red ab. The example is taken from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec. The problem I face is that when I use as replacement the ${myArray[0]} it fails while it works when I use as replacement the "XX", for example. Any idea anyone why it does not work? Any other recommendation is welcome. Thank you all in advance.
Some extra help for the community: The answer given is connected with Using $0 to refer to entire match in Javascript's String.replace. There, user166390 proposes $& instead of $0. And then it works fine !!!
<div id="Demonstration"></div>
<script>
// INPUT
// abbcdefabh
// WANTED OUTPUT
// XXcdefXXh
let myRe = /ab*/g;
let str = 'abbcdefabh';
let myArray;
while ((myArray = myRe.exec(str)) !== null) {
// IT WORKS !!!
str = str.replace(`${myArray[0]}`, "XX");
// IT DOES NOT WORK !!!
str = str.replace(`${myArray[0]}`, `<span style = "color:red;">${myArray[0]}</span>`);
}
document.getElementById('Demonstration').innerHTML = str;
</script>
The problem I face is that when I use as replacement the ${myArray[0]} it fails
That's because you are changing the string while searching it. You are keeping the ab* occurrences and since their positions changed, the search will continue to match them and the string grows forever. Try debugging with a breakpoint in the loop and watch the str and myRe.lastIndex/myArray.index expressions.
I would like to try it exclusively with the exec().
Don't. The proper tool for this job is just replace, with a replacer string:
….innerHTML = str.replace(myRe, '<span style = "color:red;">$0</span>');

Auto-link URL with javascript Regex

I have a paragraph of text which may contain some links in plain text, or some links which are actually links.
For example:
Posting a link: http://test.com, posting an image <img src="http://test.com/2.jpg" />. Posting an actual A tag: http://test.com/test.html
I need to fish out the unformatted links from this piece of text. So any regular expression that will match the first case, but not the second or third case because they are already well formatted links.
I've managed to fish out all the links with this regex: ((http:|https:)\/\/[a-zA-Z0-9&#=.\/\-?_]+), however, am still having trouble distinguishing between the cases.
This needs to be in javascript so I don't think negative lookbehind is allowed.
Any help would be appreciated.
EDIT: I'm trying to wrap the fished out unformatted links in an a tag.
You can use this regex to get URLs outside of tags:
(?![^<]*>|[^<>]*<\/)((http:|https:)\/\/[a-zA-Z0-9&#=.\/\-?_]+)
See demo
We can shorten it a bit, too, with an i option:
(?![^<]*>|[^<>]*<\/)((https?:)\/\/[a-z0-9&#=.\/\-?_]+)
See another demo
Sample code:
var re = /(?![^<]*>|[^<>]*<\/)((https?:)\/\/[a-z0-9&#=.\/\-?_]+)/gi;
var str = 'Posting a link: http://test.com, posting an image <img src="http://test.com/2.jpg" />. Posting an actual A tag: http://test.com/test.html';
var val = re.exec(str);
document.getElementById("res").innerHTML = "<b>URL Found</b>: " + val[1];
var subst = '$1';
var result = str.replace(re, subst);
document.getElementById("res").innerHTML += "<br><b>Replacement Result</b>: " + result;
<div id="res"/>
Update:
To allow capturing inside specific tags, you can whitelist them like this:
var re = /(?![^<]*>|[^<>]*<\/(?!(?:p|pre)>))((https?:)\/\/[a-z0-9&#=.\/\-?_]+)/gi;

Match #(\w+) and replace in javascript

I'm trying to match #(\w+) in a div content and remove it.
Here's what i've tried : http://jsfiddle.net/mxgde6m7/1/ .
#(\w+) works , but it doesn't replace with space.
var content = document.getElementById('contentbox');
var find = '#(\w+)';
var reg = new RegExp(find, 'g');
var result = content.innerHTML.replace(reg, ' ');
alert(result);
<div id="contentbox">#d test
What i want: <div id="contentbox">test
</div>
Thanks in advance.
EDIT
Okay, one problem solved, another one came up.
My script http://jsfiddle.net/mxgde6m7/9/ works perfectly there, but when i try it on my website, only a half works. The last part where it should replace #(\w+) with space doesn't work at all. If i copy/paste the CONTENT of the function in console(chrome), it works , but if i paste the function and i call it, it doesn't work.
Please help ! I'm stuck.
Using a RegExp constructor, you need two backslashes \\ in place of each backslash \.
var find = '#(\\w+)';
hwnd is correct that you need to double escape \w in your regular expression.
var find = '#(\\w+)';
But, you could also make this code much cleaner by defining a regex literal like so -
var content = document.getElementById('contentbox');
var result = content.innerHTML.replace(/#(\w+)/g, ' ');
alert(result);
Doing it this way doesn't require double escaping, as it's not a string.

How to Find and Replace word from URL in JQuery?

i have come through many relevant questions but my scenario is different. . . . . . . . . . . . . .
I have this URL Address:
http://www.domain.com/word-one/word-two/word-three/word-four
there are 4 words after slash in my URL, and i want find 'word-three' replace it with anything.
How can i do it with Jquery on Click event.
Any help will be appreciated. Thanks
(Edited)
There is something i forgot to mention that is word-three is not hard coded maybe something else at this place. So the thing is We have to change the word after 3 Slashes.
If you want to replace 'word-three' with 'edited'
var url = "http://www.domain.com/word-one/word-two/word-three/word-four";
url.replace(url.split('/')[5], 'edited');
Try this:
var url = "http://www.domain.com/word-one/word-two/word-three/word-four"
var array = url.split("/");
console.log(array);
array[5] = "someOtherWord";
var new_url = array.join("/")
console.log(new_url)
console.log for debugging purposes.
View on Fiddle:
Edit:
I'm assuming here you know how to wrap this into onclick event. Also, you will need to pass your url somehow to the event handler. There is more than one way of doing that depending on your code, and where the url comes from.
You don't need jQuery..
1.Use .replace (but it only replaces the first occurrence, not all occurrences)
var url = "http://www.domain.com/word-one/word-two/word-three/word-four";
url.replace('word-three','somex');
//result "http://www.domain.com/word-one/word-two/somex/word-four"
2.For replacing multiple occurrences, use split & join
var url = "http://www.domain.com/word-one/word-two/word-three/word-four";
url.split('word').join('somex');
//result "http://www.domain.com/somex-one/somex-two/somex-three/somex-four"

RegEx for WordPress file

I am trying to recognize a string like this one: file=2013/08/something_320x480.jpg and to replace it in JavaScript.
Here is my regex:
newStr = str.replace('/file=\d+\/\d+\/.+\d+x\d+.jpg/', 'irrelevant');
I also tried
newStr = str.replace('/file=.+\.jpg/', 'irrelevant');
However, my string is never replaced. What am I doing wrong?
The regexp literal does not take apostrophes.
Try:
newStr = str.replace(/file=\d+\/\d+\/.+\d+x\d+.jpg/, 'irrelevant');
Are you sure the file is set as you say it is? I just tried your example in the console and it works...
> var a = "file=2013/08/something_320x480.jpg"
undefined
> a.replace(/^file=\d+\/\d+\/.+\d+x\d+.jpg$/, 'irrelevant');
"irrelevant"
Update: I didn't spot that you had apos' in your regex, well spotted #Taemyr

Categories

Resources