I have a <textarea> that I am attempting to add quotation marks around each value a user puts inside the text box upon clicking a button. My code appears to be viewing every row as 1 large value and just adds quotation marks at the beginning of the first word and end of the last word where it looks like this:
"one word
two word
three word"
I am attempting to achieve this output:
"one word"
"two word"
"three word"
Here's my current code:
document.getElementById("phraseButton").addEventListener('click', function () {
var keywordBox = document.getElementById('keywordBox');
keywordBox.value = ('"' + keywordBox.value + '"');
});
<textarea id="keywordBox" type="text" rows="100" cols="30">Insert Keywords</textarea>
<button id="phraseButton">Phrase</button>
you can replace all \n in your textarea with "\n" using replace(). something like this:
document.getElementById("phraseButton").addEventListener('click', function () {
var keywordBox = document.getElementById('keywordBox');
keywordBox.value = ('"' + keywordBox.value + '"');
keywordBox.value = keywordBox.value.replace(/\n/g, '"\n"')
});
<textarea id="keywordBox" type="text" rows="100" cols="30">Insert Keywords</textarea>
<button id="phraseButton">Phrase</button>
Related
Here while displaying the variable on modal upon clicking on the button I got some issue. var name = details[i].name it gives the exact full value but when I display this data on modal it only displays the first word. The words after the first word or space all removing automatically. What's wrong here with my code ?
if (details[i].taskmaster_id && details[i].events.length) {
var name = details[i].name
var status = details[i].status
console.log('status', status)
console.log(name) //displays full word here
messageCleaner.innerHTML = '<button class="btn btn-msg-cleaner btn-sm" id="msg" data-name=' + name + ' data-status=' + status + '>Message to Cleaner</button>';
//appending Message to Cleaner button
headerContentJustify.appendChild(messageCleaner);
}
$(document).on('click', '#msg', function (e) {
const {
name,
status
} = e.target.dataset;
$("#sendmessagetocleaner").modal('show')
$('#sendmessagetocleaner').on('shown.bs.modal', function (e) {
console.log(name) // displays only first word here
//if the word is john doe I only john here
$("#cleaner_name").val(name)
$("#sub").val(`${name}`)
})
});
You are missing the double quote:
messageCleaner.innerHTML='<button class="btn btn-msg-cleaner btn-sm" id="msg"
data-name="'+name+'" data-status="'+status+"
'>Message to Cleaner
</button>';
Without it, the value of the attribute is not grouped, but it's only the first word until the space. The second word is another attribute in itself.
I want to convert all the + sign in the textarea field where the user types and parse that + sign and the text after it until the newline character into an HTML input checkbox.
For example, if the user, in the textarea, types:
+ Feed the kittens
+ Call the doctor
+ Go buy grocery
I want to parse it to something like:
<input type="checkbox"><label>Feed the kittens</label>
<input type="checkbox"><label>Call the doctor</label>
<input type="checkbox"><label>Go buy grocery</label>
I need to return this as a string with the HTML in it.
I created a function called listNote(note) that takes in note which is the text in the textarea. How should I go about writing this?
you may refer below code for an idea:
$(document).ready(function() {
$("#parseButton").click(function() {
var str = $("#mytext").val(); //get the text entered by user
var allLabels = str.split("+"); //split the text assuming that user will be writing data in required fashion
allLabels.shift(); //skip the 0th index of array which will be blank
var htmlString = "";
//iterate over all the tasks one by one to form html string
$.each(allLabels, function(index, value) {
htmlString += '<input type="checkbox"><label>' + value + '</label>';
});
//append the html to div
$("#myHtml").html(htmlString);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="mytext" rows="4" cols="50">
+ Feed the kittens
+ Call the doctor
+ Go buy grocery</textarea>
<button id="parseButton">Parse</button>
</br>
</br>
Output:
<div id="myHtml"></div>
Here's what you need to do :
split the textarea content into separate notes, either splitting over + (but you need to ignore the first item of the array) or linefeed (but then you can't have multilines notes)
remove the leading + (a simple substring is enough)
add the tag opening and closing (string concatenation)
Hope it gets you started !
Try with simple split and ArrayMap
function change(){
var final="";
var res =$('textarea').val().split("+");
res.map(function(a){
if(a != ""){
final += '<input type="checkbox"><label>'+a+'</label>';
}
})
console.log(final)
$('body').append(final)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea cols="20" rows="4" >+ Feed the kittens
+ Call the doctor
+ Go buy grocery </textarea>
<button onclick="change()">click</button>
I need a textarea to include a set of double quotes at the start and end of the textarea value. The below code works in that double quotes are added to the start and end of the field, but if the user enters text and then goes back to the field, multiple double quote sets can be added. How can I prevent this? A jQuery solution is also acceptable.
<textarea name="quoteName" id="quoteName" style="width:100%" rows="4" onChange="quotes();" autofocus></textarea>
function quotes(){
var quoteValueBefore = document.getElementById("quoteName").value;
var ensureQuotes = "\"" + quoteValueBefore + "\"";
document.getElementById("quoteName").value = ensureQuotes;
}
Check to see if the text already begins with a quote, and if it already ends with one. If either is missing, add it.
Also check that the length >= 2, otherwise " would pass the test (ends with a quote? check. begins with a quote? check.)
function quotes() {
var quoteValue = document.getElementById("quoteName").value;
if (!quoteValue.match(/^"/))
quoteValue = '"' + quoteValue;
if (!quoteValue.match(/"$/))
quoteValue += '"';
if (quoteValue.length < 2)
quoteValue += '"';
document.getElementById("quoteName").value = quoteValue;
}
<textarea name="quoteName" id="quoteName" style="width:100%" rows="4" onChange="quotes();" autofocus></textarea>
function checkQuotes(id) {
str = document.getElementById(id).value;
if (str[0] != '"') {
str = '"'.concat(str);
}
if (str[str.length - 1] != '"') {
str = str.concat('"')
}
return str
}
function quotes() {
withQuotes = checkQuotes("quoteName");
document.getElementById("quoteName").value = withQuotes
}
<textarea name="quoteName" id="quoteName" style="width:100%" rows="4" onchange="quotes()">testing the quotes feature</textarea>
This snippet will check if the first character is a quote, if it isn't it will prepend it. It also checks if the last character is a quote, if it isn't it will append it. This probably isn't the most friendly UI solution, and I recommend either adding this through CSS if you're using it for display purposes, or using PHP or whatever you're doing for the backend form submission.
I was able to replace the punctuation with span tags and separate the sentences, but I tried to increment the id by one for each sentence and it only worked on the first one.
$('.whatever').each(function(index) {
var sentences = $(this).html().replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g,
'<span id="'+index+'">$1</span>$2<SENTENCE_END>');
$(this).html(sentences);
});
Thanks for any ideas.
If all of your text is inside #whatever, you'll want to first split the text by periods and then iterate through each of those to add <spans>.
Here's an example:
// set counter
var j = 0;
// get text from div
var sentences = $('#whatever').text().trim();
// split text by "."
var sentences = sentences.split('.');
// empty the output div
$('#whatever').empty();
// for each sentence, check for blank sentence,
// add span with counter number, trim spaces,
// add leading space if this is not the first sentence,
// add "." at the end of sentence, output to div
$(sentences).each(function () {
if (this.trim()!='') {
$('#whatever').append( (j>0?" ":"") + '<span class="sentence" id="sentence_' + j + '">' + this.trim() + '.</span>');
j++;
}
});
http://jsfiddle.net/FrDzL/1/
Why are you using the id selector? The id selector $('#whatever') only selects one element (the first element matching the id on the page). Hence that each loop is only executed once (that's why it only worked in the first one).
Modify your html code to use classes, and select using $('.whatever').
ID Selector (“#id”)
Selects a single element with the given id attribute.
Source: http://api.jquery.com/id-selector/
Try the following
HTML
<p class="whatever">hej</p>
<br>
<p class="whatever">hej</p>
<br>
<p class="whatever">hej</p>
JS
var j = 0;
$('.whatever').each(function() {
var sentences = $(this).html().replace('hej','nej');
j++;
$(this).html(sentences);
});
JSFiddle
And finally, working code for your example
var j = 0;
$('.whatever').each(function() {
var sentences = $(this).html().replace(/([^.!?]*[^.!?\s][.!?]['"]?)(\s|$)/g,
'<span class="sentence" id="'+j+'">$1</span>$2<SENTENCE_END>');
j++;
$(this).html(sentences);
});
I'm trying to create a simple page that "corrects" YouTube's old embed code so that it works in PowerPoint 2010. If I hard code the embed code into a textarea on the page, it works fine, but if the user pastes the embed code into the text area, the javaScript doesn't seem to run.
Take a look here:http://jsfiddle.net/pch8N/
Here's what I have so far:
<p>Click the button to "fix" the old embed code</p>
<textarea rows="10" cols="60" id="demo"></textarea>
<br/>
<script>
function myFunction()
{
var str=document.getElementById("demo").innerHTML;
var n=str.replace(/\/\/www.youtube/g,"http://www.youtube").replace(/version=3/g,"version=2");
document.getElementById("demo").innerHTML=n;
}
</script>
<button onclick="myFunction()">Try it</button>
Thanks for the help!
You should use value instead of innerHtml
function myFunction2()
{
var str=document.getElementById("demo2").value;
var n=str.replace(/\/\/www.youtube/g,"http://www.youtube").replace(/version=3/g,"version=2");
document.getElementById("demo2").value=n;
}
var str=document.getElementById("demo").innerHTML;
You should use .value and not .innerHTML
Put your textarea inside form tag
Then use
var str=document.getElementById("demo").value;
// hope this would be usefull
// i used these codes for auto completing the texts in textarea.
// other methods change all matching items before the selected text
// but this affects only the text where caret on.
// at first, i divided textarea.value into 3 pieces. these are ;
// p1; until the 'searched' item, p2 after 'searched' item
// and pa = new item that will replaced with 'searched' item
// then, i combined them together again.
var tea = document.getElementById(targetTextArea);
caretPosition = tea.selectionStart - ara.length; //ara=searched item
p1 = tea.value.substring(0,caretPosition);
console.log('p1 text : ' + p1);
p2 = tea.value.substring(caretPosition+ara.length,tea.value.length);
console.log('p2 text : ' + p2);
pa = yeni; //new item
console.log('pa text : ' + pa);
tea.value = p1 + pa + p2;
tea.selectionStart = caretPosition + yeni.length;
tea.selectionEnd = caretPosition + yeni.length;
tea.focus();