Remove first line from Textarea - javascript

I have a tool that removes the blank lines from a confirmation (text) but for some reason there is a top line that is not being read as blank line and does not get deleted.
Currently my tool allows a person to paste text into the textarea then when "remove spaces & copy" button is clicked blank lines are removed and text is copied to the clipboard.
I want to keep the same function but somehow delete the first line either when text is entered into the textarea or when "remove spaces & copy" button is clicked.
<script>
function copyToClipboard(element) {
var text = $(element).clone().find('br').prepend('\r\n').end().text()
element = $('<textarea>').appendTo('body').val(text).select()
document.execCommand('copy')
element.remove()
}
</script>
<textarea name="mas" rows="100" rows="50" contenteditable="true" id="p20" class="content" onchange="this.value=this.value.replace(/[\n\r](?!\w)/gi,'');" style="height: 500px; width:800px;" type="text" data-bind="value: myValue, hasFocus: cleared"></textarea>
<!----------- BUTTONS ------------>
<div class="fixed">
<button onclick="copyToClipboard('#p20')" class="templateBtn">Remove Spaces & Copy</button>
<input type="button" data-bind="click: clearValue" value="clear" class="templateBtn" />
<script type="text/javascript">
var viewModel = {
myValue: ko.observable(''),
cleared: ko.observable(false),
clearValue: function() {
this.myValue('');
this.cleared(true);
}
};
ko.applyBindings(viewModel);
</script>
<!----------- END.BUTTONS ------------>
<div class="mas" id="hide" ></div>
<pre contenteditable="true" id="p20" class="templateText">
</div></div>

The regular expression [\n\r](?!\w) matches any CR or LF not followed by an alphanumeric or underscore character. So it can match the first of two line terminators in a row when replacing blank lines with the null string. '' It doesn't match a line terminator followed by a letter. Hence a line terminator at the beginning of text, followed by a word character, is left in place.
Blank lines defined as "Start of line, followed by zero or more whitespace characters not including line terminators, followed by end of line, followed by zero or more line terminators" can be matched by a multi line regular expression such as:
/^[ \f\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*$[\n\r]*/gm;
where the first character set is that used for matching whitespace (\s) after removing the line feed and carriage return characters, and the $[\n\r]* component matches both line terminators and end of input. (Edited: a trailing blank line without a line terminator at the end is matched)
Try it below by entering lines and clicking outside the textarea element to trigger a change event:
function removeBlankLines( textArea) {
var blankLine = /^[ \f\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]*$[\n\r]*/gm;
textArea.value=textArea.value.replace(blankLine,'');
}
<textarea onchange="removeBlankLines( this)" cols="20" rows="8"></textarea>
This does not trim or remove spaces within non-blank lines. If you are still having trouble achieving what you wish to do, please update the question with text data used to produce the problem and detailed description of what you expected and what you got. Please remove the knockout code if it not related to the question (it doesn't appear to be).

Here is a quick fix you could use, perform a trim() on the replaced text:
<textarea name="mas" rows="100" rows="50" contenteditable="true"
id="p20" class="content"
onchange="this.value=(this.value.replace(/[\n\r](?!\w)/gi,'')).trim();"
style="height: 500px; width:800px;" type="text"
data-bind="value: myValue, hasFocus: cleared"></textarea>

Related

Insert newline <br> at the end of textarea line

I have a form (an within the form inter alia a textarea) which is send by an ajax post request to a php file. In the php file I send a html mail with the content of the form. The textarea has a fixed size (cols, rows and maxlength).
This is the textarea:
<textarea class="form-control font-consolas" id="hellotext"
wrap="hard" cols="36" rows="10" style="width: auto" maxlength="360"
data-limit-rows="true"
name="hellotext" required></textarea>
I successfully convert the new line:
var hellotext = encodeURIComponent($("#hellotext").val());
hellotext = hellotext.replace(/%0A/g,"<br>");
This is an example of a converted text:
Hello, this is a short test. Now a NewLine is coming in the word previous NewLine.
Thaaaaaaaaaaaaaaaaats a short teeeeeeeeeeeeeeeest (new line in teeeeeeest).
NeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeLine
But the text should make each line a NewLine at character 36. Of course, a whole word must not be truncated, but a word longer than 36 characters should be. As the user sees it in the input:
Why not use editable div? It automatically breaks the lines you want. Given that you provide the right styling to the receiving end. e.g. white-space: pre-line
Click here to know how to add the div manually to the form: Getting value from contenteditable div
let editablediv = document.querySelector('div')
function output(str){
document.querySelector('pre').textContent=str
}
editablediv.addEventListener('keyup',function(event){
output(event.target.innerText)
} )
let msg = 'Nehemiah 8:10 \n\n Do not grieve, for the joy of the Lord is your strength. Isaiah 41:10 So do not fear, for I am with you; do not be dismayed, for I am your God. I will strengthen you and help you; I will uphold you with my righteous right hand.'
editablediv.textContent=msg
output(msg)
pre{
white-space:pre-line;
width:50%;
}
#ed{
border:1px solid #000;
width:50%;
}
<label for=ed><h3>Editable Div</h3>
Click on the box below to edit it;</label>
<div id=ed contenteditable=true></div>
<h3>Output</h3>
<pre></pre>

Removing whitespace in textarea ignored by jQuery.trim()

I have a <textarea> which contains a text called by php. The text contains an ID of the user, so it's for every user different. However, the html looks always like this:
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>
How do I remove these whitespaces. I have tried multiple trim suggestions or Regex approaches on SO, but none of them are working. The textarea cannot be changed into a div or p.
Update:
Regex is somehow ignored, but the below answer gave the outcome:
$("#text").val((i, v) => '${v.slice(1, -1).trim()}');
Use regex pattern /\s{2,}/g in .replace() that match multiple spaces and remove them from string.
$("#text").val((i, v) => v.replace(/\s{2,}/g, ''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>
Also you can remove " from start and end of string using String.slice() and then remove space using .trim(). At the end wrap string with ""
$("#text").val((i, v) => `"${v.slice(1, -1).trim()}"`);
You can use a regex to remove quotes and spaces
$("#text").val($("#text").val().replace(/^"\s+(.*?)\s+"$/,"$1"));
console.log(">"+$("#text").val()+"<")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id="text" readonly="readonly">" example text "</textarea>
</div>

Include space from input

My user wants an input field where he can enter a message, which I will then have displayed as a scrolling marquee across the page. He wants to be able to include empty spaces, for example,
"Employees please look up."
My textarea, when I get the text, doesn't notice the space. Any way to get that?
I know this is an odd request - google only tells me how to remove whitespace, not include it.
var text = $('textarea').val();
<textarea class='messageInput'></textarea>
I am pretty sure that you are getting the value with all the white-spaces right, the problem is in the displaying of the value in your (probably) custom div. The best way would be to set white-space: pre on that element which (as the option suggests) will preserve white-space. ;) Example:
<div id="foo" style="white-space: pre"><!-- insert text here --></div>
And ignore all the &nbps; suggestions which are essentially modifying the text content. CSS is the right way to do this!
You need to convert space characters into non-breaking spaces, which can be done using String.prototype.replace() with a regular expression:
$('#text').html($('textarea').val().replace(/ /g, '&nbsp'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class='messageInput'>employees hello</textarea>
<p id="text"></p>
You need / /g so that it will match all spaces, not just the first one, which .replace(' '...) would do.
Note that smajl's suggestion is less invasive and probably better, but I'll leave this for posterity.
The spaces in the value are not ignored. It's that the browser by default "compresses" duplicate spaces. Use white-space:pre;
<input type="text" id="input">
<button id="button">
TEST
</button>
<div id="result"></div>
document.getElementById("button").onclick = function() {
var content = document.getElementById("input").value;
console.log(content);
document.getElementById("result").innerHTML = content;
}
#result {
white-space:pre;
}
<input type="text" id="input">
<button id="button">
TEST
</button>
<div id="result"></div>
EDIT: too late ;)

how to remove <textarea> whitespace

I want a <textarea>, as the one I'm writing in right now actually.
How do I make the textarea behave like this one? I want it to start at the beginning and not give me whitespace to erase when clicking in the middle of it.
HTML
<p>
<textarea class="noteToAdd">
</textarea>
</p>
Any ideas?
That what is between the start tag <textarea> and end tag </textarea> is it's value. Even whitespace is seen as 'value'. You probably have something like this: (note the whitespace)
<textarea>
</textarea>
So, to remove that, remove all whitespace and place the start and ending tag directly after each other.
<textarea></textarea>
Remove your whitespace between the textarea tag. Like as
<textarea></textarea>
Try this one :
<p>
<textarea class="noteToAdd">
</textarea>
</p>
Make sure there is no whitespace between your <textarea> and </textarea> tags, any whitespace here will show up in your text area.
More help is not possible without you providing the HTML/CSS.
Remove the extra white space in between the textarea opening and closing tags as they take up that space. You write your content inside <textarea></textarea>
<p>
<textarea class="noteToAdd"></textarea>
</p>

regular expression repeating

I'm trying to add 'ig' in the middle of each syllable in a word. For example, super (su and per) would become sigupiger (sigu and piger) Here is my code so far:
function iggify(text) {
var iggEdText = text.split(/((a|e(?!$)|i(?!ng$)|o|u|y){1,3}|le$|ing$)/ig).join("ig");
document.getElementById('resultField').innerHTML = iggEdText;
}
Demo codepen
My regular expression repeats twice after joining. e.g. words becomes wigoigoigrds, instead of simply wigords.
How can I make it only repeat once?
Instead of splitting an joining, you just need to append ig to the vowels that can be easily achieved with .replace():
text.replace(/(?:a|e(?!$)|i(?!ng$)|o|u|y){1,3}|le$|ing$/ig, "ig$&");
// ^^^ - Non-capturing group ^^ - The whole matched text
I removed the outer capturing group and changed the second one to non-capturing. Since we replace with the whole match, I use the $& back-reference in the replacement part (i.e. I restore the matched text during replacement and add ig before it).
See the whole snippet below:
function iggify(text) {
var iggEdText = text.replace(/(?:a|e(?!$)|i(?!ng$)|o|u|y){1,3}|le$|ing$/ig, "ig$&");
document.getElementById('resultField').innerHTML = iggEdText;
}
<h1>
Convert words to wig-ords!
</h1>
<div>
<input id="inputBox" placeholder="Type words to iggify here">
</div>
<div>
<button id="searchButton" onclick='iggify(document.getElementById("inputBox").value)'>Iggify!</button>
<span id="resultField"></span>
</div>
</body>

Categories

Resources