Develop Reference

replacing hashtags with anchor links in realtime

I want text within a textarea that has the hash # character to be replaced with an anchor link as they're typing.
eg. something #somethingelse somethingsomethingelse its actual code would be
something #somethingelse somethingelse
but in the textarea, I'd only want #somethingelse to be highlighted as I don't want it to actually have anchor code, kinda like how twitter and fb does it.
how does it work?
$('textarea').on("keyup", function() {
var str = $(this).val();
if (!str.match(/(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,#?^=%&:\/~+#-]*[\w#?^=%&\/~+#-])?#([a-zA-Z0-9]+)/g)) {
if (!str.match(/#([a-zA-Z0-9_]+)#/g)) {
str = str.replace(/#([a-zA-Z0-9_]+)/g, '#$1');
$('textarea').html(str)
}
}
});
.hashtag {
background: #000;
color: #fff;
}

I write it in javascript :
Html :
<textarea id="textArea" onkeyup="changeHash()"></textarea>
Javascript :
var outputString="";
function changeHash(){
var getObject= document.getElementById('textArea');
outputString =getObject.value.toString();
var checkTheLastChar = outputString.slice(-1);
if(checkTheLastChar=="#"){
outputString = outputString.substring(0, outputString.length - 1);
outputString += "⚓"; //Change it with anything you want
}
getObject.value = "";
getObject.value = outputString;
}
https://jsfiddle.net/emilvr/q27xgshe/1/

What you need to do is have a div below a transparent text area and duplicate the text from the textarea into the div with the links appended. If you append the text for a html tag to a text area it won't render because anything in a textarea only renders as editable text.

Can I use setAttribute to change the text inside the text node?

I know that I can use nodeValue to change the text inside the text likeelement.firstChild.nodeValue = text but can I use setAttribute to do the same thing?
HTML :
<p id="description">Some text here.</p>
JS :
var description = document.getElementById("description");
description.setAttribute(nodeValue, text);
It doesn't work. Does it means that "nodeValue" is not an attribute of an element?

No. setAttribute does, well, set an attribute. It doesn't set contents.
However, you can use CSS to display an attribute as if it were content.
var description = document.getElementById("description");
description.setAttribute('data-content', 'Updated text');
#description::after {
content: attr(data-content);
}
<p id="description" data-content="Some text here."></p>
This should only be used for styling purposes, not to insert real content.

You want to set node content here and not node attribute so you could use .textContent instead :
// Set the text content:
description.textContent = text;
Hope this helps.
var description = document.getElementById("description");
var text = 'New text';
description.textContent = text;
<p id="description">Some text here.</p>

No you cannot. setAttribute is used to manipulate HTML element attributes.
For example, if you wanted to update a button to be disabled you would do something like:
var button = document.querySelector('my-button');
button.setAttribute('disabled', 'disabled');
To change the text you should use textContent:
var description = document.getElementById("description");
description.textContent = 'New text here.';

Add selected text to textbox with additional info

What I want - A button that (onclick) adds the selected text to a textbox (with the name of "body"). I would like it to be prefixed with a linebreak and greater than sign, and at the end two linebreaks/a paragraph.
My current code:
function
addtext() {
var newtext = '\uA' '\u3E' document.getSelection() '\uA';
this.email.comments.value += newtext;
location.href="#emailme"}
Basically, after selecting text and clicking the button, add the selected text to the form with a few changes. What actually happens is absolutely nothing.
Notes: NO JQUERY. JQuery answers will be ignored. Pure JS only.

try this
var textBox = document.getElementById("text-box"); // replace the id by your text box identifier
var addTextButton = document.getElementById("add-text-button"); // replace the id by your button identifier
function addText() {
// \u000a is escape sequence for line feed
var newText = '\u000a>' + document.getSelection().anchorNode.textContent + '\u000a\u000a';
// add any extra data to new text here like newText += extraData
textBox.value += newText;
}
addTextButton.addEventListener("click", function(event) {
event.preventDefault();
addText();
});

How to get Selected Text from DIV

I'm getting the selected text from textarea but I can't get it from a div.
I'm trying with document.getElementById('myDiv') but it doesn't work.
To be more specific. When I have text, using this method I can get the selected text
function TestSelection ()
{
if (window.getSelection) {
var selectionRange = window.getSelection();
alert ("The text content of the selection:\n" + selectionRange.toString());
}
}
but I cant specify the div to get it's selected text. Only from this div, not from another.
I tried var value = document.getElementById("myDiv").innerHTML;
and then value.getSelection but it doesn't work too.
Thank you very much!!!

Simply ,do the following :
var ss=getSelection();
ss.baseNode.data.substring(ss.baseOffset,ss.extentOffset);

Use the innerHTML property
var html = document.getElementById('myDiv').innerHTML;

You should use innerHTML property:
var value = document.getElementById("myDiv").innerHTML;

You should use Selection
var selObj = window.getSelection();
window.alert(selObj);

for jquery
var str = $("#myDiv").text();
str is the text

Replace text with HTML element

How can I replace a specific text with HTML objects?
example:
var text = "some text to replace here.... text text text";
var element = $('<img src="image">').event().something...
function ReplaceWithObject(textSource, textToReplace, objectToReplace);
So I want to get this:
"some text to replace < img src...etc >.... text text text"
And I would like manipulate the object element without call again $() method.
UPDATE:
I solved.
thanx #kasdega, i made a new script based in your script, because in your script i can't modify the "element" after replace.
This is the script:
$(document).ready(function() {
var text = "some text to replace here.... text text text";
var element = $('<img />');
text = text.split('here');
$('.result').append(text[0],element,text[1]);
$(element).attr('src','http://bit.ly/mtUXZZ');
$(element).width(100);
});
I didnt know that append method accept multiples elements.
That is the idea, only need to automate for multiple replacements
thanx to all, and here the jsfiddle

do a split on the text you want to replace then use the array indexes 0 and 1...something like:
function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
var strings = textSource.split(textToReplace);
if(strings.length >= 2) {
return strings[0] + objectToReplace.outerHTML() + strings[1];
}
return "";
}
UPDATE: I found another SO post Get selected element's outer HTML that pointed me to a tiny jquery plugin that helps here.
I believe this jsfiddle has what you want. outerHTML is the tiny jquery plugin I included in the JSFiddle.
You can also use replace which will reduce some code: http://jsfiddle.net/kasdega/MxRma/1/
function ReplaceWithObject(textSource, textToReplace, objectToReplace) {
return textSource.replace(textToReplace, objectToReplace.outerHTML());
}

function textToObj (text,obj,$src){
var className = "placeholder-"+text;
$src.html($src.html().replace(text,"<div class='"+className+"'></div>"));
$("."+className).replace(obj);
}

you can use $(selector).outerHtml to get the html string of an element

You can replace the html directly: http://jsfiddle.net/rkw79/qNFKF/
$(selector).html(function(i,o) {
return o.replace('old_html','new_html');
})