I am trying to auto-detect addresses on a page and add the class "address" where found.
var rangyPatternApplier = function(element, pattern, style) {
var innerText = element.innerText;
var matches = innerText.match(pattern);
if (matches) {
for (var i = 0; i < matches.length; i++) {
console.log("Match: " + matches[i]);
var start = innerText.indexOf(matches[i]);
var end = start + matches[i].length;
let range = document.createRange();
var start = innerText.indexOf(matches[i]);
console.log('inner text: ' + innerText);
console.log('start: ' + start);
console.log('starts with: ' + innerText.substring(start));
var end = start + matches[i].length;
var startNode = element.childNodes[0];
var endNode = startNode;
while (startNode.nodeValue.length < start) {
start -= startNode.nodeValue.length;
end -= startNode.nodeValue.length;
startNode = startNode.nextSibling;
endNode = startNode;
if (startNode == null) {
error.reportError("Just wrong in Sections.rangyPatternApplier");
return;
}
}
while (endNode.nodeValue.length < end) {
end -= endNode.nodeValue.length;
if (endNode.nextSibling) endNode = endNode.nextSibling;
while (!endNode.nodeValue) {
endNode = endNode.childNodes[0];
}
if (endNode == null) {
error.reportError("Just wrong in Sections.rangyPatternApplier");
}
}
range.setStart(startNode, start);
console.log("starts with: " + startNode.nodeValue.substring(start));
range.setEnd(endNode, end);
var applier = rangy.createClassApplier(style, {
elementTagName: "span",
elementProperties: {
},
});
window.getSelection().addRange(range);
applier.toggleSelection();
}
}
}
Called via:
$("P").each(function () {
rangyPatternApplier(this, new RegExp("\\d+\\s[A-z]+\\s[A-z0-9]+\\s(Street|St|Avenue|Av|Ave|Road|Rd)", "mgi"), "Address");
});
On text in a paragraph:
If the income renders the household ineligible for CA/CILOCA, the case will be systemically referred to the Administration for Children s Services Transitional Child Care Unit at 109 East 16th Street 3rd floor for evaluation of Transitional Child Care (TCC) benefits. The TCC Worker determines eligibility for up to 12 months of TCC benefits.
The regex is working, the address class is being applied. I am applying the range to the window selection because there appears to be a bug in rangy when applied just on the Range (I'm getting an error message). But somehow, when I create the range, the span appears 5 characters before the start of the address and ends 9 characters early. The early ending part could be due to the tag around the "th" in 16th street. But why is the range 5 characters earlier than what I'm finding in innerText?
Sheesh this was a pain but I got it working. Adding my solution here so hopefully at least a few people don't have to go through doing something that should be much more "built-in", in my opinion
//nextTextNode is for getting the next text node from the DOM
function nextTextNode(node) {
if (node.nodeType == 1) { //element
while (node.nodeType != 3) {
node = node.firstChild;
}
return node;
}
if (node.nodeType == 3) { //text node
if (node.nextSibling) {
if (node.nextSibling.nodeType == 3) {
return node.nextSibling;
} else {
return nextTextNode(node.nextSibling);
}
} else {
while (!node.nextSibling) {
node = node.parentNode;
if (!node) return null;
}
if (node.nextSibling.nodeType == 3) {
return node.nextSibling;
} else {
return nextTextNode(node.nextSibling);
}
}
} else {
throw new Error("nextTextNode: Node is either null, not connected to the DOM, or is not of node type 1 or 3");
}
}
And then create range. Text nodes have extra newline and space characters compared to element.innerText . In the function below I track both the number of extra characters and the total characters to keep track of the inconsistancies between innerText and node.nodeValue and how many characters "in" it is.
function createRangeForString(startElement, text) {
var extras = 0;
var innerText = startElement.innerText;
var start = innerText.indexOf(text);
if (start === -1) throw new Error ("createRangeForString. text: " + text + " not found in startElement");
var textNode = nextTextNode(startElement);
var totalCharsSeen = 0;
var range = document.createRange();
for (var i = 0; i < start; i++) { // I don't think I have to add extras in limit for i. Is already included
if ((i + extras) - totalCharsSeen >= textNode.nodeValue.length) { //check if textNode is long enough
totalCharsSeen += textNode.nodeValue.length;
textNode = nextTextNode(textNode);
}
while (textNode.nodeValue.charAt(i + extras - totalCharsSeen) == "\n") {
extras++;
}
while (textNode.nodeValue.charAt(i + extras - totalCharsSeen) == " " && innerText.charAt(i) != " ") {
extras++;
}
}
range.setStart(textNode, i + extras - totalCharsSeen);
var end = start + text.length;
for (var i = start + 1; i < end; i++) { // I don't think I have to add extras in limit for i. Is already included
if ((i + extras) - totalCharsSeen >= textNode.nodeValue.length) { //check if textNode is long enough
totalCharsSeen += textNode.nodeValue.length;
textNode = nextTextNode(textNode);
}
while (textNode.nodeValue.charAt(i + extras - totalCharsSeen) == "\n") {
extras++;
}
while (textNode.nodeValue.charAt(i + extras - totalCharsSeen) == " " && innerText.charAt(i) != " ") {
extras++;
}
}
range.setEnd(textNode, i + extras - totalCharsSeen);
return range;
}
Related
Is there a way to save the changes like changing the background of HTML text that span over multiple tags so that when it is loaded again the changes made should be reflected in the HTML page.
EDIT: Detailed explanation.
When the HTML page is loaded, the text is selected and highlighted using the range object and the executeCommand:
document.execCommand("BackColor", false, 'yellow');
The changes (highlighting the text as yellow) remain until the page is reloaded. But when the page is reloaded these changes are not there. What i want is to save somehow these changes like in local DB sqlite so that when page is reloaded/refreshed the changes in HTML page should appear.
Any idea how to do it. Do i need to save its range start offset and end offset which can be used to create range next time the page is loaded. Please give your insights.
For each selection, you could serialize the selected range to character offsets and deserialize it again on reload using something like this:
Demo: http://jsfiddle.net/WeWy7/3/
Code:
var saveSelection, restoreSelection;
if (window.getSelection && document.createRange) {
saveSelection = function(containerEl) {
var range = window.getSelection().getRangeAt(0);
var preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(containerEl);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
var start = preSelectionRange.toString().length;
return {
start: start,
end: start + range.toString().length
};
};
restoreSelection = function(containerEl, savedSel) {
var charIndex = 0, range = document.createRange();
range.setStart(containerEl, 0);
range.collapse(true);
var nodeStack = [containerEl], node, foundStart = false, stop = false;
while (!stop && (node = nodeStack.pop())) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
stop = true;
}
charIndex = nextCharIndex;
} else {
var i = node.childNodes.length;
while (i--) {
nodeStack.push(node.childNodes[i]);
}
}
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
} else if (document.selection) {
saveSelection = function(containerEl) {
var selectedTextRange = document.selection.createRange();
var preSelectionTextRange = document.body.createTextRange();
preSelectionTextRange.moveToElementText(containerEl);
preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
var start = preSelectionTextRange.text.length;
return {
start: start,
end: start + selectedTextRange.text.length
}
};
restoreSelection = function(containerEl, savedSel) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(containerEl);
textRange.collapse(true);
textRange.moveEnd("character", savedSel.end);
textRange.moveStart("character", savedSel.start);
textRange.select();
};
}
Using character offsets doesn't work if the cursor is at the beginning of a new paragraph. The approach below walks the DOM node and counts all nodes towards the offset. It also handles start and end individually to make sure that the selection remembers its exact position. Here is an updated version that I use in a major project (see functions at end):
/*
Gets the offset of a node within another node. Text nodes are
counted a n where n is the length. Entering (or passing) an
element is one offset. Exiting is 0.
*/
var getNodeOffset = function(start, dest) {
var offset = 0;
var node = start;
var stack = [];
while (true) {
if (node === dest) {
return offset;
}
// Go into children
if (node.firstChild) {
// Going into first one doesn't count
if (node !== start)
offset += 1;
stack.push(node);
node = node.firstChild;
}
// If can go to next sibling
else if (stack.length > 0 && node.nextSibling) {
// If text, count length (plus 1)
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
node = node.nextSibling;
}
else {
// If text, count length
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
// No children or siblings, move up stack
while (true) {
if (stack.length <= 1)
return offset;
var next = stack.pop();
// Go to sibling
if (next.nextSibling) {
node = next.nextSibling;
break;
}
}
}
}
};
// Calculate the total offsets of a node
var calculateNodeOffset = function(node) {
var offset = 0;
// If text, count length
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
if (node.childNodes) {
for (var i=0;i<node.childNodes.length;i++) {
offset += calculateNodeOffset(node.childNodes[i]);
}
}
return offset;
};
// Determine total offset length from returned offset from ranges
var totalOffsets = function(parentNode, offset) {
if (parentNode.nodeType == 3)
return offset;
if (parentNode.nodeType == 1) {
var total = 0;
// Get child nodes
for (var i=0;i<offset;i++) {
total += calculateNodeOffset(parentNode.childNodes[i]);
}
return total;
}
return 0;
};
var getNodeAndOffsetAt = function(start, offset) {
var node = start;
var stack = [];
while (true) {
// If arrived
if (offset <= 0)
return { node: node, offset: 0 };
// If will be within current text node
if (node.nodeType == 3 && (offset <= node.nodeValue.length))
return { node: node, offset: Math.min(offset, node.nodeValue.length) };
// Go into children (first one doesn't count)
if (node.firstChild) {
if (node !== start)
offset -= 1;
stack.push(node);
node = node.firstChild;
}
// If can go to next sibling
else if (stack.length > 0 && node.nextSibling) {
// If text, count length
if (node.nodeType === 3)
offset -= node.nodeValue.length + 1;
else
offset -= 1;
node = node.nextSibling;
}
else {
// No children or siblings, move up stack
while (true) {
if (stack.length <= 1) {
// No more options, use current node
if (node.nodeType == 3)
return { node: node, offset: Math.min(offset, node.nodeValue.length) };
else
return { node: node, offset: 0 };
}
var next = stack.pop();
// Go to sibling
if (next.nextSibling) {
// If text, count length
if (node.nodeType === 3)
offset -= node.nodeValue.length + 1;
else
offset -= 1;
node = next.nextSibling;
break;
}
}
}
}
};
exports.save = function(containerEl) {
// Get range
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
return {
start: getNodeOffset(containerEl, range.startContainer) + totalOffsets(range.startContainer, range.startOffset),
end: getNodeOffset(containerEl, range.endContainer) + totalOffsets(range.endContainer, range.endOffset)
};
}
else
return null;
};
exports.restore = function(containerEl, savedSel) {
if (!savedSel)
return;
var range = document.createRange();
var startNodeOffset, endNodeOffset;
startNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.start);
endNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.end);
range.setStart(startNodeOffset.node, startNodeOffset.offset);
range.setEnd(endNodeOffset.node, endNodeOffset.offset);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
};
This only works on modern browsers (IE 9+ at least).
Without knowing more about the context, it is hard to give an exact answer, but yes it would be possible, but it will be quite complex for most cases. Depending on the usecase, there are a few ways to go.
Cookies or Local storage
You could use some sort of client-side storage (cookies, local storage or similar) and save information about what elements were modified and how. Whenever the page is reloaded you read that storage and apply the changes. How to implement it will depend on how those changes are made, and will be to0 extensive to cover in a single SO-answer I'm afraid.
Server-side storage
If you know who each user is (you have some form of authentication), whenever they change the appearance of something (however that is made), you make an ajax-request to the server and save those changes to a database. On every subsequent page load, you would then have to check what use is making the request, do a lookup in your database to see if they've made any changes, and in that case apply them accordingly.
Common for both the client- and server-side storage solutions is that they will be quite extensive to implement I believe.
Browser plugin
Another way to go would be to make use of plugins like Greasemonkey for Firefox that allow the user to customize the way a webpage is rendered. Those customizations will be persistent across page loads.
I have a textarea that is used to hold massive SQL scripts for parsing. When the user clicks the "Parse" button, they get summary information on the SQL script.
I'd like the summary information to be clickable so that when it's clicked, the line of the SQL script is highlighted in the textarea.
I already have the line number in the output so all I need is the javascript or jquery that tells it which line of the textarea to highlight.
Is there some type of "goToLine" function? In all my searching, nothing quite addresses what I'm looking for.
This function expects first parameter to be reference to your textarea and second parameter to be the line number
function selectTextareaLine(tarea,lineNum) {
lineNum--; // array starts at 0
var lines = tarea.value.split("\n");
// calculate start/end
var startPos = 0, endPos = tarea.value.length;
for(var x = 0; x < lines.length; x++) {
if(x == lineNum) {
break;
}
startPos += (lines[x].length+1);
}
var endPos = lines[lineNum].length+startPos;
// do selection
// Chrome / Firefox
if(typeof(tarea.selectionStart) != "undefined") {
tarea.focus();
tarea.selectionStart = startPos;
tarea.selectionEnd = endPos;
return true;
}
// IE
if (document.selection && document.selection.createRange) {
tarea.focus();
tarea.select();
var range = document.selection.createRange();
range.collapse(true);
range.moveEnd("character", endPos);
range.moveStart("character", startPos);
range.select();
return true;
}
return false;
}
Usage:
var tarea = document.getElementById('myTextarea');
selectTextareaLine(tarea,3); // selects line 3
Working example:
http://jsfiddle.net/5enfp/
A somewhat neater version of the search for lines:
function select_textarea_line (ta, line_index) {
const newlines = [-1]; // Index of imaginary \n before first line
for (let i = 0; i < ta.value.length; ++i) {
if (ta.value[i] == '\n') newlines.push( i );
}
ta.focus();
ta.selectionStart = newlines[line_index] + 1;
ta.selectionEnd = newlines[line_index + 1];
} // select_textarea_line
Add a onclick or ondblclick event handler to your <textarea>:
<textarea onclick="onClickSelectLine(this)"></textarea>
And JavaScript function to handle the onclick event:
/**
* onclick event for TextArea to select the whole line
* #param textarea {HTMLTextAreaElement}
* #returns {boolean}
*/
function onClickSelectLine(textarea) {
if (typeof textarea.selectionStart == 'undefined') {
return false
}
let text = textarea.value
let before = text.substring(0, textarea.selectionStart)
let after = text.substring(textarea.selectionEnd, text.length);
let startPos = before.lastIndexOf("\n") >= 0 ? before.lastIndexOf("\n") + 1 : 0
let endPos = after.indexOf("\n") >= 0 ? textarea.selectionEnd + after.indexOf("\n") : text.length
textarea.selectionStart = startPos
textarea.selectionEnd = endPos
return true
}
To make the function more forgiving on possible faulty input add after:
// array starts at 0
lineNum--;
This code:
if (typeof(tarea) !== 'object' || typeof(tarea.value) !== 'string') {
return false;
}
if (lineNum === 'undefined' || lineNum == null || lineNum < 0) {
lineNum = 0;
}
How to select line of text in textarea javascript double click on particular line.
//This function expects first parameter to be reference to your textarea.
function ondblClickSelection(textarea){
var startPos = 0;
var lineNumber = 0;
var content = "";
if(typeof textarea.selectionStart == 'undefined') {
return false;
}
startPos = textarea.selectionStart;
endPos = textarea.value.length;
lineNumber = textarea.value.substr(0,startPos).split("\n").length - 1;
content = textarea.value.split("\n")[lineNumber];
var lines = textarea.value.split("\n");
var endPos = lines[lineNumber].length+startPos;
textarea.selectionStart = startPos;
textarea.selectionEnd = endPos;
return true;
}
I've written code that takes a large block of text, splits it into 995 character blocks and pushes each block into an array. However, this often results splits words when they fall at the 995-character line- how could I edit my code so that each block of text is as close as possible to 995 characters long (must be under) but ends at the last available space?
function cutUp() {
var PAname = prompt("Determine PA type and PA Name (e.g. 5=mexican food=");
var chunks = [];
var OGstring = document.getElementById('PATypes').value;
var my_long_string = OGstring.split('1').join('').split('2').join('').split('3').join('').split('4').join('').split('5').join('').split('6').join('').split('7').join('').split('8').join('').split('9').join('').split('0').join('').split('[edit]').join('').split('[citation needed]').join('').split('[').join('').split(']').join('').split('(').join('').split(')').join('');
var i = 0;
var n = 0;
while (n < my_long_string.length) {
chunks.push(my_long_string.slice(n, n += 995));
}
if (chunks[0] != null) {
$('PAType=Name=Value8').innerHTML = PAname + chunks[0];
}
if (chunks[1] != null) {
$('PAType=Name=Value9').innerHTML = PAname + chunks[1];
}
if (chunks[2] != null) {
$('PAType=Name=Value10').innerHTML = PAname + chunks[2];
}
if (chunks[3] != null) {
$('PAType=Name=Value11').innerHTML = PAname + chunks[3];
}
if (chunks[4] != null) {
$('PAType=Name=Value12').innerHTML = PAname + chunks[4];
}
if (chunks[5] != null) {
$('PAType=Name=Value13').innerHTML = PAname + chunks[5];
}
if (chunks[6] != null) {
$('PAType=Name=Value14').innerHTML = PAname + chunks[6];
}
if (chunks[7] != null) {
$('PAType=Name=Value15').innerHTML = PAname + chunks[7];
}
if (chunks[8] != null) {
$('PAType=Name=Value16').innerHTML = PAname + chunks[8];
}
if (chunks[9] != null) {
$('PAType=Name=Value17').innerHTML = PAname + chunks[9];
}
////this is to create new exportable table
$('exportTable').innerHTML += $('tableContents').innerHTML;
$("exportTable").removeClass('hidden');
///this resets to default
defaultReset();
}
Without any specific Javascript knowledge, I'd say to look ahead 995 characters, and if that character isn't itself a space, to start looking back towards the start until you find a space, and truncate there.
In C-like pseudocode, with chars being your big array of characters:
for(truncOffset = 995; truncOffset > 0; truncOffset--):
{
if chars[currentLoc + truncOffset] = ' ': /* a space character */ break;
}
Rinse, repeat to taste. Remember to move currentLoc to currentLoc + truncOffset after finding that space.
I'm having some weird issues "improving" a bookmarklet.
I took this example from here - it takes a regular expression and highlights text on the page matching the expression - I've reformatted it for easy reading using JSMin for Notepad++:
javascript : (function () {
var count = 0,
text,
regexp;
text = prompt("Search regexp:", "");
if (text == null || text.length == 0)
return;
try {
regexp = new RegExp("(" + text + ")", "i");
} catch (er) {
alert("Unable to create regular expression using text '" + text + "'.\n\n" + er);
return;
}
function searchWithinNode(node, re) {
var pos,
skip,
spannode,
middlebit,
endbit,
middleclone;
skip = 0;
if (node.nodeType == 3) {
pos = node.data.search(re);
if (pos >= 0) {
spannode = document.createElement("SPAN");
spannode.style.backgroundColor = "yellow";
middlebit = node.splitText(pos);
endbit = middlebit.splitText(RegExp.$1.length);
middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
++count;
skip = 1;
}
} else if (node.nodeType == 1 && node.childNodes && node.tagName.toUpperCase() != "SCRIPT" && node.tagName.toUpperCase != "STYLE") {
for (var child = 0; child < node.childNodes.length; ++child) {
child = child + searchWithinNode(node.childNodes[child], re);
}
}
return skip;
}
window.status = "Searching for " + regexp + "...";
searchWithinNode(document.body, regexp);
window.status = "Found " + count + " match" + (count == 1 ? "" : "es") + " for " + regexp + ".";})();
Here's my bespoke improvement to the first 10 lines for single-click highlighting for the :
javascript : (function () {
var count = 0,
regexp;
try {
regexp = /\bwho\b|\bwhom\b|\blay\b|\blie\b|\bmoot\b|\bcontinual\b|\bcontinuous\b|\benvy\b|\bjealousy\b|\benvious\b|\bjealous\b|\bnor\b|\bmay\b|\bmight\b|\bwhether\b|\bfewer\b|\bless\b|\bdisinterested\b|\buninterested\b|\bdifferent than\b|\bimpactful\b|\baffect\b|\beffect\b|\birony\b|\bironic\b|\bnauseous\b/i;
} catch (er) {
alert("Unable to create regular expression\n\n" + er);
return;
}
...
The first works, the second doesn't. The first even works when copying the expression from the second into the prompt.
When the second runs, the browser consumes CPU for a while, then highlights squat. The first is near-instant. Behaviour doesn't seem to differ between IE9/Chrome17/FF10. Using new Regex(...) in the second doesn't help - I'm using the slash notation to save having to double slash the rest, making it less readable.
Would anyone be willing to point me towards my mistake?
you left out the "(" and ")" in your expression.
This works: regexp = /(\bwho\b|\bwhom\b|\blay\b|\blie\b|\bmoot\b|\bcontinual\b|\bcontinuous\b|\benvy\b|\bjealousy\b|\benvious\b|\bjealous\b|\bnor\b|\bmay\b|\bmight\b|\bwhether\b|\bfewer\b|\bless\b|\bdisinterested\b|\buninterested\b|\bdifferent than\b|\bimpactful\b|\baffect\b|\beffect\b|\birony\b|\bironic\b|\bnauseous\b)/i;
If you ask me why the parenthesis are necessary, I don't know. Related to code further downstream is my educated guess. All I did was compare what was different between the original code and your code; given the fact that the expression worked when entered into the input box.
I've had a look around but the other answers don't really help me out.
I want to create a small WYSIWYG editor, there only needs to be the options to add links and add lists. My question is how do I append tags around selected text in a textarea when one of the links/button (e.g. "Add Link") is clicked?
I've written a jQuery plug-in that does this (and which I really must document), which you can download from http://code.google.com/p/rangyinputs/downloads/list.
The following will work in all major browsers and surrounds the selected text, and restores the selection to contain the previously selected text:
var url = "https://stackoverflow.com/";
$("#yourTextAreaId").surroundSelectedText('', '');
For a solution without jQuery, you could use the getInputSelection() and setInputSelection() functions from this answer for compatibility with IE <= 8 as follows:
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
function offsetToRangeCharacterMove(el, offset) {
return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
}
function setInputSelection(el, startOffset, endOffset) {
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
el.selectionStart = startOffset;
el.selectionEnd = endOffset;
} else {
var range = el.createTextRange();
var startCharMove = offsetToRangeCharacterMove(el, startOffset);
range.collapse(true);
if (startOffset == endOffset) {
range.move("character", startCharMove);
} else {
range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
range.moveStart("character", startCharMove);
}
range.select();
}
}
function surroundSelectedText(el, before, after) {
var val = el.value;
var sel = getInputSelection(el);
el.value = val.slice(0, sel.start) +
before +
val.slice(sel.start, sel.end) +
after +
val.slice(sel.end);
var newCaretPosition = sel.end + before.length + after.length;
setInputSelection(el, newCaretPosition, newCaretPosition);
}
function surroundWithLink() {
surroundSelectedText(
document.getElementById("ta"),
'<a href="https://stackoverflow.com/">',
'</a>'
);
}
<input type="button" onmousedown="surroundWithLink(); return false" value="Surround">
<br>
<textarea id="ta" rows="5" cols="50">Select some text in here and press the button</textarea>
If you don't need support for IE <= 8, you can replace the getInputSelection() and setInputSelection() functions with the following:
function getInputSelection(el) {
return {
start: el.selectionStart,
end: el.selectionEnd
};
}
function setInputSelection(el, start, end) {
el.setSelectionRange(start, end);
}
You can use a function like the following:
function addUrl(url) {
var textArea = $('#myTextArea');
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var replacement = '' + textArea.val().substring(start, end) + '';
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, textArea.val().length));
}