We Keep Coding

replace a tag inside a string variabile using jquery

Hi I need to dinamically change the content of a textarea initialized with tinymce editor, based on external input field. For example:
I have a input text like this:
<input type="text" id="descr" value="This is a demo">
And a textarea inizialized with tinymce plugin:
<textarea id="content">Hi this is a text and this is a dynamic field: <span data-placeholder="mydescr">This is a demo</span> .<br>If you change text input, then new value is reported above!</textarea>
Now i'd like to change text inside textarea IF I change input field #descr.
$("#descr").on("change", function(e) {
e.preventDefault();
var newValue = $(this).val();
var content = $("#content").val();
var replacedValue = $(content).find("[data-placeholder]").text(newValue);
//...i don't know how to glue it again
});
At this point, if i write "BLA BLA BLA" inside input text field, the editor need to change automatically into:
<textarea id="content">Hi this is a text and this is a dynamic field: <span data-placeholder="mydescr">BLA BLA BLA</span> .<br>If you change text input, then new value is reported above!</textarea>
But I not sure how to re-glue the unchanged text, with changed text. Any suggest?

Because the content inside textarea is considered plain text, I believe you cannot select it like a DOM element. You'd need to use regex to select the text between those html tags.
Here's one way to do it:
$("#descr").on("change", function(e) {
e.preventDefault();
var newValue = $(this).val();
var content = $("#content").val();
$("#content").val(content.replace(/(?<=<span data-placeholder="mydescr">)(.*)(?=<\/span>)/, newValue));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="descr" value="This is a demo">
<textarea id="content">Hi this is a text and this is a dynamic field: <span data-placeholder="mydescr">This is a demo</span> .<br>If you change text input, then new value is reported above!</textarea>

how to place red color asterisk mark after text in placeholder using jquery?

<input type="text" name="" placeholder="nd"><span hidden="hidden" id = "hi" style="color: red">*</span>
<script>
jQuery(document).ready(function(){
var c = $("#hi").text();
$(c).css('color','red');
var content = jQuery('input:text').attr('placeholder');
jQuery('input:text').attr('placeholder',content+c);
});
</script>
I have placed input text with a placeholder and using jquery script I am trying to add * immediately after the placeholder's text which should have red color but my code is not working. The asterisk mark is showing in the placeholder but it is of color black not of red.

Copy text to clipboard from hidden input is not working in jQuery

I have the following code to copy a text to the clipboard by clicking on a Button. Text is in a Paragraph element, So I move that text to a hidden input field and then copy it to the clipboard. But this is only working if I move the text to a text field but not a hidden field. I also tried to display:none the input field, but the result is the same. (I can't set it to visibility:hidden because the space matters). How can I solve this?
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").attr("value", n).select();
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>
Here is the editable jsfiddle:
http://jsfiddle.net/d9a4x6vc/

You can try to change the type of the input to text before select then, and bring the type hidden back after like that.
$("button").on("click", function() {
var n = $("#copyMe").text();
$(".copied").attr("value", n);
$(".copied").attr("type", "text").select();
document.execCommand("copy")
$(".copied").attr("type", "hidden")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="copyMe">
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>

I had exactly the same problem recently. What I did is put that input box position as absolute and moved it off screen. Also notice that even input field width does affect result. I tried to put width and height to 0, and it didn't copy after that also.

As DavidDomain explains in answer to a similar question, you need to change your input properties to take the value.
In your case, you can try this:
$("button").on("click", function() {
var n = $("p").text();
n = $.trim(n);
$(".copied").css({
position: "absolute",
left: "-1000px",
top: "-1000px"
}).attr("value", n).attr("type","text").select();
$(".copied").attr('css','').attr("type","hidden");
document.execCommand("copy");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
This is the copied text!
</p>
<input type="hidden" class="copied"/>
<button>
COPY
</button>
<input type="text" placeholder="paste copied text here"/>

Setting a text to Bold in a textarea

Heres the particular html code, which consists of the button 'bold' and the text area.
<form name="myform">
< input type="button" onClick="Bold()" value="Bold">
</form>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ...">< /textarea>
Heres My Javascript
function Bold() {
myTextArea.document.execCommand('bold',false,null);
}
What am i doing wrong ????

You can simply use javascript like this:
function Bold() {
document.getElementById("myTextArea").style.fontWeight = 'bold';
}
Demo

If you want the textarea to display bold text, you can do that via css style attribute:
<textarea style="font-weight: bold">test-text</textarea>
Also, you can use div insted, and set contenteditable="true" http://jsfiddle.net/XNkDx/2852/ And, use hotkey ctrl+b
UPDATE:
If you want to use button, just, get selected text and change it http://jsfiddle.net/XNkDx/2859/

I Think you should use string.bold() function of javascript like this one:
function Bold() {
var str = document.getElementById('myTextArea').value();
var result = str.bold();
}
or you can use css style
{font-weight:bold;}

Make HTML hidden input visible

I want to change an invisible HTML input in to visible when I click a button as shown below.
My HTML line that create the hidden input is:
<input type="hidden" id="txtHiddenUname" value="invalid input" />
my JavaScript for changing the visibility is:
var y = document.getElementById("txtHiddenUname");
y.style.display= "inline";
But this couldn't make the hidden element to be visible.
Any ideas?

You should change the type of input element as :
y.setAttribute('type','text');
//or
y.type = 'text';
1) Either user java script inside body tag as below :
<input type="hidden" id="txtHiddenUname" value="invalid input" />
<script type="text/javascript">
var y = document.getElementById("txtHiddenUname");
y.type= "text";
</script>
OR
2) Use some event handler such as onload
<head>
<script type="text/javascript">
function on_load(){
var y = document.getElementById("txtHiddenUname");
y.type= "text";
}
</script>
</head>
<body onload = "on_load()">
<input type="hidden" id="txtHiddenUname" value="invalid input" />
...
so that the DOM is ready.

Here is not matter of CSS it's matter of attributes, So you need to change the attribute type from hidden to something else like text
Kindly check this [how-to-change-html-object-element-data-attribute-value-in-javascript][1]
check this: How to change HTML Object element data attribute value in javascript. To change the attribute value using jQuery or Javascript