Develop Reference

How to bold a selected area in javascript while creating a basic text editor?

I am trying to create basic text editor using Rxjs and javascript. I have created a button named 'B' in .html file which when clicked makes a selected text from textarea bold.How do I give styling to that selected text in textarea using javascript in boldcontent() function below?
Also, if a selected text is entirely bold then how can I make bold button auto-selected?
I know that this is very basic doubt but I am a beginner in javascript. It would be really great if someone can help me in understanding this.
let btnbold=document.getElementById('btnbold');
let textarea=document.getElementById('text_area_id');
fromEvent(btnbold,'click').subscribe(()=>boldcontent());
let boldcontent=()=>{
let selection = (textarea.value).substring(textarea.selectionStart,textarea.selectionEnd);
}```

let's focus on mutating the text and leave rxjs aside. In your boldcontent you have:
let selection = textarea.value.substring(
textarea.selectionStart,
textarea.selectionEnd,
);
But this only contains the selected text. What you really want to do is to replace the whole text in your textarea with the selected part bracketed by two asterisks ** (given markdown is your preferred method here):
const {value, selectionStart, selectionEnd} = textarea;
const newValue =
value.slice(0, selectionStart) + // (1)
"**" +
value.slice(selectionStart, selectionEnd) + // (2)
"**" +
value.slice(selectionEnd, value.length); // (3)
textarea.value = newValue;
(1) this gets the substring before the selected text
(2) this is the selected text
(3) this is the remainging substring after the selection
However this is a very limited example and far from production ready. A proper implementation would also ensure that each ** has a corresponding closing tag. Bold text that is partially selected should be properly merged with the new selection etc... To cover all these edge cases you could create new questions here on SO.

How to access text boxes on a particular slide and change its text in Google Slides?

I am trying to access a text box on Google slides in order to change its text but every time I run the programme, it prints "textRange" on the alert box despite the fact that there's some text in the text box.
function updateTextBox() {
var slides = SlidesApp.getActivePresentation().getSlides();
var shapes = slides[0].getShapes();
var text = shapes[0].getText();
SlidesApp.getUi().alert(text);
}

You are missing asString()
Indeed,it is documented that the method getText() return a TextRange.
TextRange is a class that has methods, to return the actual test fo the range you need to use the method asString().
var text = shapes[0].getText().asString();

Change Text Color if match found automatically JavaScript|HTML

i have a textarea where i want to change color automatically
for example : this is my pen my friend
as soon as i enter the above text the keyword=pen should become green color and
keyword=freind should become red as soon it matches
How do i achieve this thing
code is working but half working
function changeText()
{
document.getElementById("text").style.color ="green";
}
</script>
Another Code i have But not Working
var str = 'Connect';
var value = str.includes('Connect');
if(value==str)
{
document.getElementById("text").style.color ="green";
}
else
{
document.getElementById("text").style.color ="red";
}

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input, not just a word.
see for more info: Multicolor Text Highlighting in a Textarea or Text Input

First, you'll need to detect changes on the text area. Look into element.addEventListener() and the change event. Then inspect the text from the text area. You have bunch of options for this, but the easiest one is string.includes(). If it returns true, call your function to turn the text green.

Prevent jiggling when auto-adjusting width of text input

I managed to write an angular directive (I have extracted it to pure jQuery for this post) to auto-adjust the width of a text input.
However, it seems like the width of the input field is not changing fast enough because the contents scroll back and forth.
Type into the input field to see for yourself: Demo on JSFiddle
Here is the code:
var $element = $('#my-input');
// create dummy element to calculate text width in pixels
var dummy = $('<span></span>');
$('body').append(dummy);
dummy.css('visibility', 'hidden');
// apply all relevant text styling from our input element
dummy.css('fontFamily', $element.css('fontFamily'));
dummy.css('fontSize', $element.css('fontSize'));
dummy.css('fontWeight', $element.css('fontWeight'));
dummy.css('letterSpacing', $element.css('letterSpacing'));
var resize = function() {
dummy.html($element.val().replace(/ /g, ' '));
$element.width(dummy.innerWidth() + 1); // it's 1px off for some reason
};
resize();
$element.on('keyup', resize);
How can I prevent this from happening? I've already experimented some with scrolling the input field but to no success. Anybody have an idea?

The keyup that you use is triggered only when the user release its keyboard key, so only after that the character is added on the input field and its content is bigger than its width. It cause the jiggeling you talk about.
You should add the input event to your listener event list. This event, supported only by new browsers, is triggered everytime a character is changed in the input field.
You can check this answer about input field change events to learn more.

Text box size should grow when typing

I am looking for a effect in the text box.
Initially the size of the text box will be small and when type in, the text box should grow bigger. Is there any jquery plugin available for this effect? If not how can this be achieved.?

$("#mytextbox").keyup(function() {
$(this).attr("maxLength", $(this).attr("maxLength") + 1);
$(this).attr("size", $(this).attr("size") + 1);
});
Be aware that if the user presses a function key with the textbox focused, the size will increase regardless. You should instead monitor the textbox for changes in its value:
$("#mytextbox").keyup(function() {
$(this).attr("size", $(this).val().length + 1);
});
Note that the second method will also support copy/pasting into the input field, whereas the first one will not, although you'll have to make sure the user has enough room to copy something in (right now, the size is set to +1 of the current value, meaning the user can only input one character at a time before the size is increased).

var $text = $('myselector')
$text.keyup(function() {
$(this).attr({size : $(this).val().length});
});
This takes the size directly from the string length of whatever is input in the textbox.

have a look at this jquery plugin:
http://www.unwrongest.com/projects/elastic/