I created my first web app using Python, Django, Bootstrap and google-app-engine
The requirement I have is when people suggest external links, The program should be able to find and highlight as clickable URL in the text.
For example, when we give http://www.google.com in stackoverflow, it converted it as hyperlink
I have no idea how to achieve this, any help is greatly appreciated
https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs#urlize
Look into the python re module.
For example, taking John Gruber's URL regex pattern and matching it against his data set you could do something like...
giant_regex = r'''(?i)\b((?:[a-z][\w-]+:(?:/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))'''
output_with_links = re.sub(giant_regex, r'\1', source_html)
Unfortunately this will capture actual links as well that don't need converting, but now your problem is finding the correct regex (which I'm sure has been documented online if you look). The python and django part is done.
This is not a full answer, but will get you started: to do what you want in Django, you will need to (1) take the input text that the user submits, (2) parse it for url patterns, and (3) return the html with a hyperlink to display in the View.
I don't know if there is a canonical regex for this purpose, but some that seem to work well are here and in this answer.
In SO, as you notice, the parsed text is first shown in a separate
display box and, once you hit "submit" is re-rendered. You can choose many ways to render the text (e.g. to parse the text on the client side with Javascript). However, for the first stage you should probably just create a "results" page with each url replaced with a hyperlink (<a href='url'>url</a>) to that url.
Related
I have a search result column where I'm using the record ID to pass parameters as a link to a non-netsuite external site I own that is designed for a specific non-NetSuite task.
The link is working great and the formula looks something like this:
'Use Tool'
However, I'd like to add some script to it by using onClick, and each time I've tried this either I get back invalid expression or the script seems to get stripped out of the link.
I've added what should just be a simple alert window with the record id as a test like this:
'Use Tool'
but using the dev tools to inspect this the search result shows up like this:
Use MT Tool With Tracking
I'd like to track something simple like which user clicked the link and what day it was, but I'm starting to think that this might not be possible.
Has anyone ever tried doing something like this before?
Is there a better way to do this?
Thanks in advance for any help.
It may be a rudimentary attempt on NetSuite's part to prevent XSS attempts, but if you don't need to support Internet Explorer you can get around it using the template literal syntax.
'Use Tool'
I still think the escaped double quote is a problem ☺, but I was able to duplicate your issue in preview mode (I think it's a result of NetSuite's whence parameter). Run or Save and Run does not encounter the issue. See screenshots of Search Formula Text fields below and corresponding elements when run.
Lazy Loader
Result
Element
Sorry for the vague question name - didn't know how to phrase it.
I have built a PHP engine to parse web pages and extract phone numbers, addresses etc.
This is going to be used by clients to populate an address book by simply entering a new contacts web address.
The problem I am having is useability:
At the moment the script just adds each item (landline number, fax etc) to a different list box and the user picks the correct one - from a useability standpoint this is hard work (how do you know which is the correct contact number without looking at the site)
so my question (finally!)
How would achieve the functionality of
http://bartaz.github.io/sandbox.js/jquery.highlight.html
On someone else website (I have no problem writing this functionality).
FOR CLARITY**
I want to show someone elses site (their contact page for example) on my site BUT I want to highlight items I have found (so for example add a tag around a phone number my php script has found)
I am aware that to display a website not on your domain an iFrame would be used - but as I need to alter the page content this is useless.
I also contemplated writing a bookmarklet that could be run on that page - but that means re-writing my parsing engine in javascript and exposing some of my tricks to make it accurate.
So I am left with pulling the page by cURL and then trying to match up javascript files, css files etc. that have relative URLs
Does anyone know how best to achieve this - and any pitfalls that might befall me.
I have tried using simple html dom parser - but it is tricky to get consistency and I also dont know how having two sets of tags, body tags etc. would affect sites.
If anyone has managed this before and could point me to the tools / general methods they used I would be eternally grateful!
PLEASE NOTE - I am very proficient with google and stack-overflow and have looked there first!
The ideal HTML solution
The easiest way to work around the relative paths for an arbitrary site would be to use the base href tag to specify the default relative location (just use the url up to the filename, such as <base href="http://www.example.com/path/to/" /> for the URL http://www.example.com/path/to/page. This should go at the top of the head block.
Then you can alter the site simply by finding the relative parts and wrapping them in your own tag, such as a span. For the formatting of these tags, the easiest way would be to add a style attribute, but you could also try to insert a <style> tag in the <head>.
Of course, you'll also need to account for badly made webpages without <html>, <head> or <body> tags. You could either wrap the source in a new set of these tags, or just put in your base and style tags, hoping that the browser will work out what to do.
You probably also want to make this interactive, so you should also wrap them with some kind of link, and ideally you'll insert some javascript to handle their actions by ajax. You should also insert your own header at the top of the page, probably floating at the top, so that they know they're using your tool. Just keep in mind that some advanced pages might then conflict with your alterations (though for those cases you could have a link saying 'is this page not displaying correctly?' to take the user to your original basic listbox page as a backup).
The more robust solution
Clearly there are a lot of potential problems with the above, even though it is ideal. If you want to ensure robustness and avoid any problems with custom javascript and css on the page you're trying to alter, you could instead use a similar algorithm to that used in text based browsers such as lynx to reformat the page consistently. Then you can apply your algorithm to highlight the relevant parts of the page, and you can apply your own formatting as well without risk of it not displaying correctly. This way you can frame it really well and maintain your interface.
The problem with this is that you lose the actual look of the original page, but you should keep the context around the numbers and addresses which is the important thing. You would also then be able to use some dynamic javascript to take the user to each number and address consecutively to improve the user experience. Basically, this is rigorous and gives you complete control over the user experience, but you lose the original look of the website which may or may not confuse your users.
Personally, I'd go for the second option, but I'm not sure if anyone's created such a parser before. If not, the simplest thing you could do would be to strip the tags to get it as plain text. The next simplest would be to convert it into some simple text markup format like markdown, then convert it back into html. That way, you'd keep some basic layout such as headings, italicised and bold text, etc.
You definitely don't want to have nested body tags. It might work, but it'll probably mess up your formatting and be inconsistent across browsers.
Here's a resource I found after a quick Google search:
https://github.com/nickcernis/html-to-markdown
There are other html to markdown scripts, but this was the more robust from the few I found. I'm still not sure though whether it can handle badly formatted pages or ones with advanced formatting, try it out yourself.
There are quite a few markdown to html converters though, in fact you could probably make a custom converter yourself quite easily to accommodate your personal needs.
SO kept preventing me from posting the title I wanted so finally got a title that let me post though it kind of sucks so feel free to edit/change it.
I have fields a user can fill in and in the javascript we have
'${chart.title}'
and stuff like that. Is it sufficient to just strip out the single quote character such that they cannot escape it back to javascript? or are there other ways to close out the string that started with the single quote character.
${chart.title} inserts the title a user typed in on a previous page so naturally they could type something like "Title'+callMethod()+'RestOfTitle" injecting a callMethod into my javascript.
thanks,
Dean
The best way would be to restrict the input to alphanumerical and space characters.
If you want to allow anything inside the title, you can use a escaping function.
http://xkr.us/articles/javascript/encode-compare/
Just stripping the string of single quote characters is definitely not enough. Think of new lines for one reason.
There are couple of options.
First go very restrictive way and do both so called white-list validation for input field for you title and always encode the text that you output to the page. That will filtered out all unwanted (and potentially dangerous) characters and make sure that if some of them pass filter (or somebody update the text to contains some js code after the filters were applied) the encoding procedure make all malicious js scripts not runable (it turns it into plain text).
Second you do let your users input what ever they want (which is highly unrecommended way but sometime developers asked to do it) but always encode the text that you output to the page.
You can implement white-list validation by yourself using regular expression or you can use one of the libraries.
We have a textarea control that holds text and hyperlinks. The links are stored as follows:
http://www.google.com [Link to a site __title__ Title of Link]
http://www.yahoo.com [http://www.yahoo.com __title__ Link with text & hyperlink the same]
In the second link, I don't want to count yahoo twice, so I want to ignore links starting with the left bracket. I know that using Regex to do this isn't the best way, but I don't know of any other way to accomplish this. So far I've tried this regex, but I figured out that Javascript doesn't support lookbehind:
(?<!\[)((http|https|ftp)\://(www\.)?)(([a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(/[a-zA-Z0-9%:/_\?\.'~&=-]*)
Anyone know of a decent way to accomplish this?
I just found out also that I can't rely on the brackets. Users can enter any type of link, using our tool that creates the brackets or by just entering it manually themselves.
Count the number of the character [ in the textarea contents.
The above solution will work, if the format that you have mentioned above persists.
You just need a count? Can't you count all the links then count all the links starting with the left bracket, and subtract?
I've learned here, on stack overflow, that what I need is called "flow-chart". I need to allow user to draw in a browser (using his mouse) a flow-chart that would represent a flow of a process or an algorithm. This flow-chart should contain decisions (yes/no diamonds), tasks (rectangles), arrows, labels etc.
Flow-chart editor should be a part of a Form on a web page, should be written in JavaScript and important is, that it must produce a text output (XML?) that will be storable in DB and when this page is opened again, chart will be rendered based on the previously save text.
No other outputs wil be necessary. Essentially, what I need is just a graphical XML editor/creator.
It would be perfect if it worked as same as CkEditor:
http://ckeditor.com/demo
This CkEditor is a JS Html editor that covers a textarea (in a form) and when you write something in this editor, it is (on the background) converted into HTML and written into the textarea. When you send the whole form using a button, the content of textarea can be processed and saved.
I read following thread, but nothing was suitable for my purposes
stackoverflow.com/questions/363592/javascript-library-for-hierarchical-flowchart
Very close to my idea was this project, but it is a Java program that is run outside of browser and output can not be stored in DB.
www.jgraph.com/jgraph.html
Did anyone use something like I just described?
Update 1: This could be what i was loking for. Does anybody know something similar and/or free?
origramy.com/origramy.html
You will find this thread useful. It talks about generating flowchart from BPMN which is in XML.