Develop Reference

wrap spans around individual letters of a div using JQuery

I'm trying to insert span elements around every letter of a div's text, belonging to a given class, using JQuery.
But my code only returns words, not letters. What is wrong?
$(function() {
var title = $(".js-split-text").text();
var titleText = title.split(" ");
var newTitle = [];
var letterCount = 0;
titleText.forEach(function(el) {
var titleElement = "<span>" + el + "</span>";
newTitle.push(titleElement);
letterCount++;
if (titleText.length === letterCount) {
var newTitleText = newTitle.join(" ");
$(".js-split-text")
.html(newTitleText)
.css({ opacity: 1 });
var aniTime = 0;
var offset = 500;
$(".js-split-text span").each(function() {
var currentSpan = $(this);
aniTime += offset;
setTimeout(function() {
currentSpan.addClass("animate");
}, aniTime);
});
}
});
});

You're are wrapping the spans around the words in the text with this code
var titleElement = "<span>" + el + "</span>";
If you want to wrap the spans around the letters, you should further split the words into letters like so
var titleElement = "<span>" + el.split('').join("</span><span>") + "</span>";

Insertion of characters before and after selection in textbox

I'm attempting to insert a value before and after a selection within my textbox (upon click of a button).
<script type="text/javascript">
$(document).ready(function(){
$('.boldbutton').on('click', function(){
var body = $("#id_body").val();
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = '<' + body.substring(start, end) + '>';
text = body.substring(0, start) + selection + body.substring(end);
$("#id_body").val(text);
});
});
</script>
If I select 'a' and click the boldbutton, this is what appears in the textbox:
a<a>a
What should appear is
<a>
Any thoughts on why this is happening?
thanks!

Try the following:
$('.boldbutton').on('click', function(){
var body = $("#id_body");
var len = body.value.length;
var start = body.selectionStart;
var end = body.selectionEnd;
var selection = body.value.substring(start, end);
var replace = '<' + selection + '>';
body.value = body.value.substring(0,start) + replace + body.value.substring(end,len);
});

The problem could be that the text field has lost its focus by the time the button gets clicked, hence the empty text selection. One thing you could do is to keep a reference to the selected text before it actually loses the focus (with .blur()), and use this data on the button click handler instead of reading from the current state of the selection, which is again, empty.
$('#id_body').blur(function(e) {
$(this).data('selection', {
start: this.selectionStart,
end: this.selectionEnd
});
})
$('.boldbutton').click(function() {
var $body = $('#id_body');
var sel = $body.data('selection');
var text = $body.val();
var start = sel.start;
var end = sel.end;
var selection = '<' + text.substring(start, end) + '>';
if (end) {
text = text.substring(0, start) + selection + text.substring(end);
$body.val(text);
$body[0].selectionStart = start;
$body[0].selectionEnd = start + selection.length;
}
$body.focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="id_body" rows="4">Select some text</textarea>
<button class="boldbutton">Bold me</button>

trigger keyup event on a tinymce window

I have a webpage/form with multiple tinymce instances and setup to respond with count of words/characters. everything works fine but could not get the display of word/character count on page load with initial content. here is my setup portion in tinymce setup.
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
}
}
Now the part i am struggling is how to trigger key up when the page is displayed with initial content so that it displays word/character count.
I tried $('#' + tinyMCE.editor(0).id + '_ifr').keyup(); and $('#textarea1').keyup(); but no use.
Can some one help me to get it right?

Add this to your setup:
ed.onInit.add(function(ed) {ed.onKeyUp.dispatch();});
Doc: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.util.Dispatcher

After:
tinymce.init
you place the code:
init_instance_callback: function(editor) {
editor.on('keyUp', function(e) {
observa_boton_ir_paso1();
});
}

There was a character missing. Try this (works at elast in my browser FF 3.6.17)
setup: function(ed) {
var text = '';
var wordcount = false;
ed.onKeyUp.add(function(ed, e) {
var contents = new Object();
for(i=0; i < tinyMCE.editors.length; i++){
if (tinyMCE.editors[i].getContent())
contents[i] = tinyMCE.editors[i].getContent();
text = contents[i].replace(/(<([^>]+)>)/g,'').replace(/\s+/g,' ');
text = $.trim(text);
$('#' + tinyMCE.editors[i].id + '_path_row').text(text.split(' ').length + ' words, ' + text.length + ' characters.');
}
});
}

How to add a prefix/suffix to text per line using javascript?

how would i add a prefix per line to a text area.. example:
this is the content of the textarea:
hello124
and i would want to add a [b] prefix and suffix to each line so that when i click a button the result will be:
[b]hello[/b]
[b]124[/b]
please help me :(

text = document.getElementById("the_textarea").value;
document.getElementById("the_textarea").value = text.replace(/.+/g, "[b]$&[/b]");
Example:

using joins and splits:
var prefix = '[b]', suffix = '[/b]',
txt = document.getElementById('myText');
txt.value = prefix + txt.value.split('\n').join(suffix + '\n' + prefix) + suffix;

Using only plain Javascript, you can do:
var textArea = document.getElementById("yourTextAreaID");
var lines = textArea.value.split("\n");
for (var i = 0; i < lines.length; ++i) {
lines[i] = "[b]" + lines[i] + "[/b]";
}
textArea.value = lines.join("\n");
Or, as #Alin Purcaru suggested, without using a loop:
var textArea = document.getElementById("yourTextAreaID");
textArea.value = "[b]" + textArea.value.split("\n").join("[/b]\n[b]") + "[/b]";

<script language="javascript" type="text/javascript">
function TextDefine(val){
var i= 0;
var array1 = val.value.split("\n");
for ( i = 0; i < array1.length; i++) {
array1[i] = "[b]" + array1[i] + "[/b]";
}
val.value = array1.join("\n");
}
</script>
<textarea name="data" id="data"></textarea>
<input type="button" name="submit1" value="Submit" onclick="TextDefine(document.getElementById('data'))" />

Convert the string into an array starting at position 1 of the array.
Push the prefix at position 0 of the array.
Convert the array back to a string with join.

How to replace the currently selected text inside an html textarea?

How do I edit the selected text of a textarea form element?
EDIT: as in edit it in-place, replacing the orignal text.

This works:
function replaceIt(txtarea, newtxt) {
$(txtarea).val(
$(txtarea).val().substring(0, txtarea.selectionStart)+
newtxt+
$(txtarea).val().substring(txtarea.selectionEnd)
);
}
$("button").on('click', function() {
replaceIt($('textarea')[0], 'fun')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Hello world.</textarea>
<button>Replace with fun</button>

I found this:
function wrapText(elementID, openTag, closeTag) {
var textArea = $('#' + elementID);
var len = textArea.val().length;
var start = textArea[0].selectionStart;
var end = textArea[0].selectionEnd;
var selectedText = textArea.val().substring(start, end);
var replacement = openTag + selectedText + closeTag;
textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('button').on('click', function() {
wrapText('test', '<b>', '</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test">This is a test</textarea>
<button>Surround with <b> tag</button>
But personaly its not working with content-editable divs.