convert text into link dynamically

Question

2.85/5 (4 votes)

See more:

I want to convert text into link

I got this->

I have a textarea in which user enter description.
I have table having column (name) in which there are 4 names (jack , drake , joey , pacino).

Now , if any word in the text the above 4 word , the text gets automatically changed to a link.

How can i do that.

Eg:

teatarea input: hello joey , me and drake are going.

output: hello joey , me and drake are going.

Posted 19-Apr-14 7:09am

bhawin parkeria

Updated 19-Apr-14 7:39am

v2

Add a Solution

Comments

Nirav Prabtani 19-Apr-14 13:31pm

Your requirement is not clear...please elaborate more

bhawin parkeria 19-Apr-14 13:49pm

please see now

Zoltán Zörgő 19-Apr-14 14:37pm

You can't do this in the textarea. But I have an idea...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Zoltán Zörgő** · Accepted Answer · 2014-04-19T13:01:00

I have upvoted your question because you have presented an interesting problem (for me). As I mentioned in my comment, I doubt you can do something like that in a textarea. Simply because textareas do not support any formatting. You might be wondering how web based WYSIWYG editors work - well, they do not rely on textareas, they do other stuff. In HTML5 you have a neat attribute, named contenteditable which makes what it promises. It makes life easier, but not that easy. I have made something that might look like what you wanted.

XML

<html>
<head>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js"></script>
 <script type="text/javascript">
 var needles = new Array();

 function evalNeedles()
 {
    needles = $('#needle').val().split(',');
 }

 function handle()
 {
    var editor = $('#editor');
    $.each(editor.contents().filter(
        function() {
            return this.nodeType === 3;
            }),
        function( index, value ) {
            for(idx in needles){
                start = value.textContent.search(needles[idx]);
                if(start >= 0){
                    var range = document.createRange();
                    range.setStart(value, start);
                    range.setEnd(value, start + needles[idx].length);
                    var anode = document.createElement("a");
                    anode.href="#";
                    range.surroundContents(anode);

                    window.getSelection().collapse(anode, 1);
                    break;
                }
            }

        });
 }

 $(function() {
        evalNeedles();
        $('#needle').bind("change", evalNeedles);
        $('#editor').bind("keyup", handle);
    });

</script>
</head>
<body>

<input type="text" id="needle" value="jack,drake,joey,pacino">
<div id="editor" contenteditable="true" style="border: 1px solid black; width: 300px; height: 100px; overflow: auto;">Edit this text!</div>
</body>