I wan to print text like this in an HTML file, what tags do you suggest?
'text \nwithout \nformatting '
My js code
const editor = document.getElementById('editor')
const previewer = document.getElementById('previewer')
editor.addEventListener('change', () => {
previewer.textContent = editor.value
})
My HTML code
<textarea id="editor" name="" cols="30" rows="10"></textarea>
<pre id="previewer"></pre>
I tried with the deprecated <plaintext>, and the <pre> tags, i expect to print text without formatting tags like \n and others
I am not clear if you want to show newlines as newlines in your previewer, or if you want to remove \n (which represents an escaped newline) in the textarea. In any case, this solution does both:
const editor = document.getElementById('editor');
const previewer = document.getElementById('previewer');
editor.addEventListener('input', () => {
previewer.innerHTML = editor.value.replace(/\\n/g, '');
});;
editor.dispatchEvent(new Event('input'));
<textarea id="editor" name="" cols="50" rows="5">text with
newlines
and escape char \n representing a newline</textarea>
<pre id="previewer"></pre>
Notes:
use 'input' instead of 'change' in the event listener, so that an update happens on each keystroke
.replace(/\\n/g, '') on the textarea value strips the escape chars
use previewer.innerHTML so that newlines in the textarea are preserved
the .dispatchEvent() makes sure to show the previewer initially in case you have initial text in the textarea
Related
I have a from. User can fill an input field with text that contains special characters like \n, \t and etc. I have to replace these special characters and add it back as value of the input field.
for example:
user input is: hello, \n how are you doing? \t this is a sample text.
This is what I need: hello, newline how are you doing? tab this is a sample text.
I am using JQuery and Typescript 2.4
How about this?
$('#input').keyup(function () {
var val = $(this).val();
var replaceWithBr = val.replace(/\\n/g, '<br>');
var replaceWithTab = replaceWithBr.replace(/\\t/g, ' ');
$('#result').html(replaceWithTab);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<div id="result"></div>
On my Ionic App I have a Textarea where the user can select a text and with button [BOLD]
add [b] [/b] around the selection.
How can I apply BOLD formating, replacing the [b] [/b] on the output text?
Thats my code. And here's the JsFiddle
<textarea id="TheTextInput" rows="5"></textarea>
<input type="button" id="TheButton" value="click" />
<input type="button" id="bold" value="BOLD" />
<pre id="TheOutput"></pre>
$(document).ready(function () {
$('#TheButton').click(PutTextIntoDiv);
});
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').text(decodeURIComponent(TheText));
}
$( "#bold" ).click(function() {
var textArea = document.getElementById("TheTextInput");
if (typeof(textArea.selectionStart) != "undefined") {
var begin = textArea.value.substr(0, textArea.selectionStart);
var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart);
var end = textArea.value.substr(textArea.selectionEnd);
textArea.value = begin + '[b]' + selection + '[/b]' + end;
}
});
Thanks for your help!!
*Its not duplicate from Is it possible to display bold and non-bold text in a textarea?
Cause I don't want format the text inside the textarea, but the OUTPUT text.
Consider PutTextIntoDiv() replacing with:
function PutTextIntoDiv() {
$('#TheOutput').html($('#TheTextInput').val().replace(/\[b\]/g, '<b>').replace(/\[\/b\]/g, '</b>'));
}
The <pre> in your JSFiddle should render <b> fine.
You can do a RegEx replace to convert the "BBCode" tags into html tags using .replace(/\[b\](.*)\[\/b\]/g, '<b>$1</b>'). Additionally, jQuery's .text() automatically encodes HTML entities, so you will not be able to add stylized text, so you should be using .html() instead. Overall, your code should be:
function PutTextIntoDiv() {
var TheText = encodeURIComponent($('#TheTextInput').val());
$('#TheOutput').html(decodeURIComponent(TheText).replace(/\[b\](.*?)\[\/b\]/g, '<b>$1</b>'));
}
I'm not sure what the purpose of encoding and immediately decoding uri components is, but I tried to keep as much as I can untouched. Here's an updated fiddle: http://jsfiddle.net/TheQueue841/62karfm1/
I'm newbie in JavaScript. I'm trying to create something like stackoverflow's textarea(s) for writing a question-answer. Now I have some regex:
text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text.replace(/__(.*?)__/g, "<u>$1</u>");
text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text.replace(/--(.*?)--/g, "<del>$1</del>");
Also I have a textarea:
<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
Now I want to apply those regex on the above textarea on click event (for every pressing key on keyboard). How can I do that?
You can use the oninput-Event for this:
function generate(text) {
text = text.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
text = text.replace(/__(.*?)__/g, "<u>$1</u>");
text = text.replace(/\*(.*?)\*/g, "<i>$1</i>");
text = text.replace(/--(.*?)--/g, "<del>$1</del>");
text = text.replace(/`(.*?)`/g, "<code>$1</code>");
text = text.replace(/>(.*?)(\n|$)+/g, "<blockquote>$1</blockquote>");
document.getElementById("out").innerHTML = text
}
<textarea id="Q&A" oninput="generate(this.value)" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>
I have two text boxes.What I want to do is while i Write something in one text box it should be copied to the other(i am able to do so).But my requirement is if i write anything else rather then a-z or A-Z or 0-9 then it should not copied to the second text box.
my html
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)">
<textarea name="source2" id="src2" cols="150" rows="20" >
my js
function showRelated(e) {
$("#src2").val($("#src1").val()) ;
}
Let me explain little bit more,Suppose i write LO^&1VE then in the second text box LOVE should be copied only.now if i go further like adding more LO^&1VE C**V then in the second text box LOVE CV should be appaer only.Can any one suggest me how to do this?
Use the regular expression [^a-zA-Z0-9] to check for or replace characters that are not alphanumeric
function showRelated(){
$("#src2").val( $("src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
Demo
function showRelated(e){
$("#src2").val( $("#src1").val().replace(/[^a-zA-Z0-9]/g,"") );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="src1" onkeyup="showRelated(event);"></textarea>
<textarea id="src2"></textarea>
Rather brutal way of doing it but here goes
function showRelated(e) {
var text=$("#src1").val().split("");
var pattern=/^[a-zA-Z0-9]*$/
var nStr='';
for (var i=0;i<text.length;i++) {
if (pattern.test(text[i])) {
nStr+=text[i];
}
}
$("#src2").val(nStr);
}
Basically this will check each char follows your criteria and then puts it in if it does.
in text area line beaks are auto added when text is longer than textarea line, and question is how to get text from textarea with newline chars (those added by user and added by textarea)? please post example in jsfiddle.net
$(selector).val()
returns text with user newline character and it drops auto newline character which are needed
my result so far
here is a sample, additional newline character is needed between 'seven' and 'eight'
Try like this:
html:
<div id="fi"></div>
<textarea id="txtarea"></textarea>
<button id="btn">go</button>
jquery:
$(document).ready(function() {
var btn = $('#btn');
var txtarea = $('#txtarea');
var result = $('#fi');
btn.click(function() {
var val = txtarea.val().replace(/\n/g, '<br/>');
result.html(val);
return false;
});
});
or set no of rows
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
I have came up with this solution (it also restricts amount of characters in line and amount of lines)
working solution
ttxt()
is a main method