This question already has answers here:
Using .replace to replace text with HTML?
(3 answers)
Set content of HTML <span> with Javascript
(4 answers)
Angular HTML binding
(24 answers)
Closed 3 months ago.
I have my own, silly Twitter alternative that I use for fun. When a user enters a URL in their comment, I want to make it clickable. I've tried this, and it correctly creates the anchor tag, but the link still isn't clickable.
This finds the URL and creates an anchor tag around it:
makeLinkWithinCommentClickable(comment: any) {
const hyperlink = (textContent) =>
textContent.replace(
/(https?:\/\/[^\s]+)/g,
(href) => `<a ng-href="${href}">${href}</a>`
);
comment.commentText = hyperlink(comment.commentText);
}
However, you can see it's just an anchor tag in plain text. How can I make it clickable?
I also tried wrapping the anchor in [code]...[/code], but that produced the same results.
This is Angular, and the HTML looks like this:
span{{comment.commentText}}/span
(The span has correct tags. Can't get it to display here.)
Related
This question already has answers here:
Javascript regex: Find all URLs outside <a> tags - Nested Tags
(1 answer)
Use regex to find specific string not in html tag
(8 answers)
Regex replace string but not inside html tag
(10 answers)
Closed 7 days ago.
I was trying to build a RegEx to find open links, and replace it with <a> tag using JavaScript. I need to cover below scenarios. The message might be coming from an email, or from an imput. So we can't really expect the proper HTML open and end tags.
Regular expression needs to detect any openly pasted/entered links on HTML (Links without html tag surrounded to it)
It needs to ignore Links with Anchor tag surrounded to it.
Need to ignore any other tag with link like img, style, script, background: url() etc.
Need to detect Joined links seperately (if 2 links are joined without space)
It should detect http, https, www. and normal domain format like example.com
I've done some research and got a few references from different sources. the best one which I could come up with is
/((?:(?:ht|f)tps?:\/\/|www)[^\s,?!]+(?!.*<\/a>))/gm
This can detect http,https, ftps, and www links, and ignore <a> tag
The bunction which I'm writing is as below.
function replaceUrl(string){
var urlRegex =/((?:(?:ht|f)tps?:\/\/|www)[^\s,?!]+(?!.*<\/a>))/gm;
return string.replace(urlRegex, function(url) {
var uri = url.indexOf("http") === -1 ? "http://" + url : url;
return '' + url + '';
});
}
The above RegEx reference is taken from THIS answer, and its working as per description. But the image example which they've mentioned is not working.
My Example Code for Testing is as below
<html><head><link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script></head><body> <br><html><body>Welcome<br><br>It's as easy to use as email, but it does so much more to protect you and your information. Tap the quick video below to learn more. <br>Intro and this is without anchor body https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328</body></html><br><br></body></html> https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328 <img src='https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328' />https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328<div class="vp-preview vp-preview-cover vp-preview-invisible" data-thumb="https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328-d?mw=1000&mh=563" data-thumb-width="1000" style="background-image: url("https://i.vimeocdn.com/video/1581148028-9611dd4489026d5c28300f0e9b945789ebaba221f0fd0ffce01e9978142e7328-d?mw=1000&mh=563");"> www.google.com can also be detected along with google.com</div>
Kindly help me to fix the issue.
This question already has answers here:
jquery not working to change inner html?
(4 answers)
Closed 5 years ago.
My html file looks like this:
<div id="myDiv" class="div-sample"></div>
I have a text file which has the following text:
<b>abracadabra</b>
Now after reading the file from an ajax request(via a php script which just reads the file), when I write the following jQuery code:
$('#myDiv').innerHTML = text;
inspite of showing abracadabra it showing with the tags.
what is going on here?
The first line var text = '<b>abracadabra</b>' sets the variable text to be equal to the string with the open and closing tags.
The second line sets the contents of the $('#myDiv') to be equal to that variable '<b>abracadabra</b>'. Because they are valid html tags they get parsed and this is why you don't see them in the browser.
When you log the content of the variable text you get it's value not parsed by the browser with the tags which is '<b>abracadabra</b>'
This question already has answers here:
How can I change div content with JavaScript?
(6 answers)
Closed 7 years ago.
How do i change the content of an div on an website that has an id with javascript?
<div class="chat-area" id="chat-area">[Changeable]</div>
I want to know how i add content where it says "[Changeable]" with javascript so i can run the command through the console.
I'd like if you keep your explainage simple, because im still very new to html/css/javascript ;)
In very simple JavaScript terms, you can use:
document.getElementById("chat-area").innerHTML = 'New Content';
And yes, this would work in GreaseMonkey / UserScripts too!
You can use the innerHTML property to achieve your goal like so:
document.getElementById("chat-area").innerHTML = "Your new content here";
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Convert tags to html entities
I am building a snippets area to a friend's site, and i need to know how to convert html tags to normal text so the page will show the tags.
Like here in the code:
<img>
so the tag will be seen and not become to a normal html tag,
And all this using javascript or jQuery.
What I got now is something like that:
<pre><code>THE USERS CODE</code></pre>
and it still hide the html tags and make them active.
thx :)
You could use
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
SOURCE: http://css-tricks.com/snippets/javascript/htmlentities-for-javascript/
Use Jquery and instead of $('something').html() use $('something').text() checkout http://api.jquery.com/text/
This question already has answers here:
Can I create script tag by jQuery?
(5 answers)
Closed 9 years ago.
Is it possible to get JavaScript script tags inside jQuery .html() function?
function pleaseWork(){
$('#content').html('<h3 style="color:#335c91">This is the header</h3><div class="holder"><script type="text/javascript" src="javascriptFile.js"></script></div>');
}
What I am trying to accomplish is when the user clicks on a button, this header and JavaScript code show up in the div content, right now when I click on the button, there is no header showing and it goes to a blank page and shows the JavaScript code (it works, but not how I would like it to work.)
Escape the </script> tag, by replacing it with this: <\/script>
If that doesn't work, also surround the script with cdata tags.
Working demo: http://jsfiddle.net/BgxZN/1/
EDIT:
If you want to actually show the contents of the javascript file inside the div, you'll need to use an XMLHTTP request or an iframe.
New working demo: http://jsfiddle.net/BgxZN/13/