How to make a word a link if the user has input # before it?

Question

I am using this code:

<form oninput="x.value=a.value">Account Info <br>
<input type="text" id="a">First Name<br>
UserName <output name="x" for="a"></output>
</form>

I want i such a way that if the user inputs a word and he has place # before the word without space then how to make the word as a link. Means the tag which happens in facebook. Can it be done with java script and how.

This was just the example to demonstrate i want to intergrate this type in my project as comments. And it will be with php. Thanks

Answer 1

You could use a textarea to input and a render to show the output. Then hiding the input and showing the output only. But that's another story.

If you use a contentEditable div, you can actually insert and render the html from it in the same component. Check it out!

$(document).on("keyup","#render", function(){
    var words = $(this).text().split(" ");
    console.log(words);
    if (words){
        var newText = words.map(function(word){
            if (word.indexOf("#") == 0) {
                 //Starts with #
                 //Make a link
                 return $("<div/>").append($("<a/>").attr("href", "#").text(word)).html();
            }
            return word;
        });
    }
    $(this).empty().append(newText.join(" "));
    placeCaretAtEnd( $(this)[0]);
});

Here is the Plunker

Thanks for the attention.

Answer 2

<form>Account Info <br>
<input type="text" id="a">First Name<br/>
<output id="result" name="x" for="a"></output>
<button type="button" onclick="changeVal(document.getElementById('a').value)">Click</button>
</form>
<script>
function changeVal(value1){
    var dt = value1.split(" ");
    document.getElementById("result").innerHTML = "";
    for(var t=0; t < dt.length; t++){
        if(dt[t].startsWith("#")){
            document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" <a href='#'>"+dt[t]+"</a>";
        }
        else{
            document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+" "+dt[t];
        }
    }
}
</script>

Checkout Jsfiddle demo

https://jsfiddle.net/tum32675/1/

Answer 3

Here's one example to check. It works with enter keypress and even prevents for adding same tags over again: http://codepen.io/zvona/pen/KpaaMN

<input class='input' type="text" />
<output class='output'></output>

and:

'use strict';
var input = document.querySelector('.input');
var output = document.querySelector('.output');

input.addEventListener('keyup', function(evt) {
  if (evt.keyCode !== 13 || !input.value.length || ~output.textContent.indexOf(input.value)) {
    return;
  }

  var tag = document.createElement('a');
  tag.appendChild(document.createTextNode(input.value));

  if (input.value.startsWith("#")) {
    tag.setAttribute("href", input.value);
  }

  output.appendChild(tag);

  input.value = "";
}, false);