Develop Reference

How can I bold an appended text using javascript?

Working on a project in which I'm wanting to make the appended text appear bold. Based on my research it should be .bold() but that's not making my appended text bold, and is instead showing my text surrounded by "< b >< /b >". What am I doing incorrectly? Here is my code:
var breweryname=response.results[i].name;
var breweryName = $("<p class='title'>").text(response.results[i].name.bold());
breweryDiv.append(breweryName);

I would suggest not using .html() as it could have injections (Which you should avoid). .name is just a text name which you want it bold then keep using .text.
To apply css (bold fonts) to your dynamically added elements (response.results[i].name).
You can simply use jQuery .css function which will let you design your element as exactly as normal css is a much better approach.
Run snippet below to see it working.
//Div to append to
var breweryDiv = $('#breweryDiv')
//Response
var breName = 'Random Name' //response.results[i].name;
//Text
var breweryName = $("<p class='title'>").text(breName);
//Apply Css
$(breweryName).css({
'font-weight': 'bold'
})
//Append Results
breweryDiv.append(breweryName);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="breweryDiv">
</div>

Instead of using .text(), use .html() (ensure that you trust the response - you dont want any injection!) You could also make your CSS class title with font-weight: bold if you'd like to separate behavior and presentation.

Make html() include content typed into textarea

I've got webpage with this structure:
<div id="report_content">
Some information
<textarea name="personal"></textarea>
<b>Other information</b>
<textarea name="work"></textarea>
</div>
After writing some text in the textareas, I use jquery to get the entire html. The result is that the textareas are empty, as if I hadn't written anything inside.
I'm guessing it's because they do not accept html, but I need to get the html including textarea's content.
The only solution I've found so far is to convert textareas to divs and then assign them the textarea content.
Is there any other way to avoid this conversion?

The problem is that .html() will not get the value (which is what the content people type into the textearea will go into). You can set the innerHTML to what the value is before getting the full html, like this...
JSFiddle
$('textarea').each(function () {
$(this).html($(this).val());
});
var html = $("#report_content").html();
console.log(html);
or... with less jquery wrapping...
var html = $("#report_content").find("textarea").each(function () {
this.innerHTML = this.value;
}).end().html();
console.log(html);

Input field with attached text to the right

I'm doing a fancy comment list on my project, structured like this:
As you see, there's a comments list and at his bottom there's an input field (textarea) to submit a comment. Note that there's the current username attached to the right (let's call it a simple static appended text).
I just found this little JS to make an input field resize automatically by adapting it to the content.
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]').keyup(resizeInput).each(resizeInput);
But it's not enough. I need it for a textarea and I want it to behave correctly when a comment is long enough to wrap on another line. By definition, the input field is a box, and it obviously acts badly compared to what I want:
Instead, this should be the right behavior:
I looked everywhere and I can't think any way to implement this. Can somebody help me?

Here is a good plugin for textarea. But it using jQuery.
usage simple as always.
$(document).ready(function(){
$('textarea').autosize();
});

You could use the contenteditable attribute:
<span contenteditable="true">comment</span> by <span class="userName">someone</span>
It is supported in practically all browsers. Using the right CSS, you can underline the content and also limit the width.

I think you mean this
NOTE: No check for selection and bound to document. Exercise for the reader to bind to a specific field and swap it for a span
FiDDLE
$(document).keypress(function(e) {
var char = String.fromCharCode(e.which);
if (e.which==13) char = '<br/>'; // needs to handle backspace etc.
$("#textfield").append(char);
$("#hiddenfield").val($("#textfield").text()); // or .html if you want the BRs
e.preventDefault();
});
using
<span id="textfield"></span> - by My Username
If you make the field contenteditable you will get this in Chrome so some additional CSS may be needed

Use a <span> with contenteditable (supported in IE too). Here is a fiddle: http://jsfiddle.net/goabqjLn/2/
<span contenteditable>Insert a comment...</span> by My Username
Then, using JavaScript, attach an event listener that mirrors the inner text of the span into a hidden input field, so it gets submitted with your <form>.
Edit: I have updated the fiddle to also include the JS code. Here is the updated code:
<span class="editor" id="editor" contenteditable data-placeholder="Insert a comment...">Insert a comment...</span> by My Username
<!-- Hide this textarea in production: -->
<textarea type="text" id="comment"></textarea>
And the JS:
function mirror() {
var text = $('#editor').html().trim()
.replace(' ', ' ')
.replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
.replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
.replace(/(<([^>]+)>)/ig, ""); // remove any remaining tags
$('#comment').val(text);
}
$('#editor').focus(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text('');
}
}).blur(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text(editor.attr('data-placeholder'));
}
}).blur(mirror).keyup(mirror);

Insert JavaScript code using Text shortcodes without using php

I'm using some javascript code to show post dates and comment number in my blog, but my blog doesn't support using php codes.
My JavaScript code
if(showpostdate==true){document.write('<span class="post-date">'+daystr+'</span>')}
if(showpostcomment==true){document.write('<span class="post-comment">'+commento+'</span>')}
My HTML code to call the JavaScript code is
<script>showpostdate = true;var showpostcomment = true;</script>
I want to change this JavaScript code so if I write this text in my text box
[date][comment]
it can show the html code
<span class="post-date">'+daystr+'</span>
<span class="post-comments">'+commento+'</span>

If you use the jQuery library something like this would work to replace the shortcodes:
$('textarea').change(function() {
$this = $(this);
// to be more efficient I would employ a test here that a shortcode exists before applying the replace functions
var textInBox = $this.val();
textInBox = textInBox.replace('[date]', date); // where date is your date var
$this.val(textInBox.replace('[comment]', commentsCount)); // where commentsCount is your comments var
});
It won't create the span that you want to wrap each variable in because you cannot nest these inside a textarea. If you want to have the shortcode typed in a textarea and then nest the returned variables in something so that you can style them, you will need to employ some kind of html + css magic where you place a see-through textarea over a div and update the div contents whenever the textarea is updated. You can then put the span elements inside the div container, and style as you want.

Can jQuery or Javascript change elements within textareas?

My first SO question! Here's what I am trying to do:
I'm rewriting a tool that generates some code a user can paste directly into Craigslist and other classified ad posting websites. I have created a list of websites (they populate from a database with PHP) the user can choose from with a radio button, and I want their choice to populate as bare text (not a link) between some <p></p> elements in a textarea. I'm using jQuery for this.
Textarea before the user chooses:
<p id="thing"></p>
Textarea after the user chooses:
<p id="thing">www.somewebsite.com</p>
HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<textarea>
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
JS
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
alert(website);
$("#thing2").html(website);
});
});
JS Fiddle (With comments)
If you see the JS Fiddle, you can see that I put another p element on the page outside the textarea, and it updates just fine, but the one inside the textarea does not. I have read many other like questions on SO and I'm starting to think that I can't change an element that's between textarea tags, I can only change the entire textarea itself. Please, lead me to enlightenment!

You actually can fairly easily manipulate the text contents of the textarea like it is part of the DOM, by transforming its contents into a jQuery object.
Here is a jsFiddle demonstrating this solution: http://jsfiddle.net/YxtH4/2/
The relevant code, inside the input change event:
// Your normal code
var website = $(this).val();
$("#thing2").html(website);
// This turns the textarea's val into a jQuery object ...
// And inserts it into an empty div that is created
var textareaHtml = $('<div>' + $("#textarea").val() + '</div>');
// Here you can do your normal selectors
textareaHtml.find("#thing").html(website);
// And this sets the textarea's content to the empty div's content
$("#textarea").val(textareaHtml.html());
The empty div wrapping your HTML is so that you can easily retrieve it as a string later using jQuery's .html() method, and so the parse does not fail if additional text is entered around the p element inside the textarea.
The real magic is $($("#textarea").val()), which takes your textarea's text and parses it into an HTML node contained in a jQuery object.

It can't do it the way that you are thinking (i.e., manipulate it as if it were a DOM element), but it is still accessible as the value of the textarea, so you can retrieve it like that, use basic string manipulation to alter it, and then set the updated string as the new value of the textarea again.
Something like this . . . first give the <textarea> an id value:
<textarea id="taTarget">
Some stuff already in here
Here is the website you chose:
<p id="thing"></p>
More stuff already here.
</textarea>
Then alter your script like this:
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val();
var currentTAVal = $("#taTarget").val();
$("#taTarget").val(currentTAVal.replace(/(<p id="thing">)([^<]*)(<\/p>)/, "$1" + website + "$3"));
});
});
Unless you need the <p> element in there, you might consider using a more simple placeholder, since it won't actually act as an HTML element within the textarea. :)
EDIT : Fixed a typo in the .replace() regex.

I know that this answer is a little bit late, but here it goes =)
You can do exactly the way you want to do. But for that, you need to implement a small trick.
by having this HTML
<input type="radio" name="sitechoice" value="www.websiteone.com">www.websiteone.com
<br />
<input type="radio" name="sitechoice" value="www.secondwebs.com">www.secondwebs.com
<p id="thing2"></p>
<textarea id="textarea">
<p id="thing"></p>
</textarea>
you can edit textarea content, as a DOM by implementing something like the function changeInnerText
$(document).ready(function () {
$("input").change(function () {
var website = $(this).val(); // Gets value of input
changeInnerText(website);
//$("#thing").html(website); // Changes
//$("#thing2").html(website); // Does not change
});
var changeInnerText = function(text) {
var v = $("#textarea").val();
var span = $("<span>");
span.html(v);
var obj = span.find("#thing")[0];
$(obj).html(text);
console.log(obj);
console.log(span.html());
$("#textarea").val(span.html());
}
});
As you can see, I just get the information from the textarea, I create a temporary variable span to place textarea's content. and then manipulate it as DOM.

Instead of attempting to insert the text into the <p> element, insert the text into <textarea> element and include the <p> tag. Something like this should do the trick:
Change:
$("#thing").html(website);
to:
$("textarea").html('<p id="thing">'+website+'</p>');
And here is a fiddle: http://jsfiddle.net/nR94s/