I have text in contenteditable div and user can copy some its parts and paste inside this div. But there are styles coping with text, so i need to take copied part and take just text from it, so i'm making
<div id="text-container" contenteditable ng-paste="textPaste($event)"></div>
and js:
$scope.textPaste= function (e) {
var pasted_text = e.originalEvent.clipboardData.getData('text/plain');
e.originalEvent.clipboardData.setData('text/plain', pasted_text);
};
So I really get the text I need to the variable pasted_text , but it's not pasted instead of origin text. Can anybody help me?
Possible solution: create detached DOM element, paste formatted text into it and then return its textContent property:
var phantomEl = document.createElement('div');
phantomEl.innerHTML = pasted_text;
var cleanText = phantomEl.textContent;
After this, you will have plain text in the cleanText variable.
Related
I am using Rich Text (Trix editor) with Rails and I want to be able to convert everything that user pastes to sanitized plain text instead of having formatted elements.
Based on Trix documentation I am using this code to convert pasted elements to string.
const element = document.querySelector("trix-editor")
element.addEventListener("trix-paste", function(e) {
element.editor.getDocument().toString()
console.log(element.editor.getDocument().toString())
})
In console, it shows correct plain text, but in the editor, all the elements are still formatted.
How can I replace text in the editor to this sanitized text?
try this: https://github.com/basecamp/trix/issues/148
document.addEventListener('trix-before-paste', function (e) {
if (e.paste.hasOwnProperty('html')){
let div = document.createElement("div");
div.innerHTML = e.paste.html;
e.paste.html = div.textContent;
}
});
Hi All,
I'm trying put some features to textarea like copy, cut and paste buttons but even I tried many times I couldn't get only part of text inside of textarea. it comes all content.
My Code below:
function copy() {
var VAL = $("#selection").select();
var DTA = $(this).text();
document.execCommand("copy");
document.execCommand("delete");
}
My Work below:
https://jsfiddle.net/dcn7pgkn/
How it would be possible that one user may copy, paste and cut operations inside of textarea?
Thanks
First You have to add brackets to your function in HTML code
<button onclick="copy()">Copy selected text</button>
Second You have to configure your jsfiddle right, you have to specify that you are using JQuery and Load Type should be No wrap - in <head>
Your code is currently copying textarea text and clearing the textarea, for copying I don't see that this line is needed:
var DTA = $(this).text();
copying shouldn't clear textarea, this line appropriate for cut action.
Here's what I've got:
<div id="fivearea">Something</div>
Then later:
var 5popup= $('#fivearea').text();
This makes 5popup = "Something".
However, I want to add some more text to what's in the div and save that as a variable. Psuedo-code:
var 5popup= $('#fivearea').text()+"some additional text";
What's the correct way to do this?
You will want to add to the current value of the variable like this:
5popup += "some additional text";
Replacing the text inside the node below:
<div id="testId">hello</div>
Can be accomplished as follows
$("#testId").html("good bye");
Resulting in the html:
<div id="testId">good bye</div>
Similarly the text inside the node can be saved to a variable as follows:
var myTest = $("#testId").html();
If you want to add to the text inside a node without deleting anything, this can be accomplished with the append function. Given the following html.
<div id="testId">hello</div>
The code:
$("#testId").append(" world");
Will result in the html:
<div id="testId">hello world</div>
I think this is what you want:
var text = $('#fivearea').text();
text += "Your text here";
$('#fivearea').text(text);
If you want to access the text, use the variable text. Hope this helped.
Using information on the internet, I got this far:
http://codepen.io/anon/pen/EeoFw
$('textarea').bind('paste', function () {
var element = this;
setTimeout(function () {
var text = $(element).val();
console.log("Paste")
}, 100);
});
It seems to work just fine, but I was wondering what event I can trigger to basically put a "clean" version of the pasted text into the text area instead of the copied contents. This includes if text was pasted from HTML, Word or other sources. Is there a way to strip out tags and such without too much hassle? I'm guessing I'm looking for some kind of regex solution but I haven't been able to find one.
Put the styled content into a hidden div, and retrieve its innerText. If your styled content is in text:
a=document.createElement('div');
a.innerHTML=text;
b=a.innerText;
I am getting html content as below:
var test='<div id="test">Raj</div>';
How can i retrieve value Raj from above html content using javascript.
It sounds like you're trying to extract the text "Raj" from that HTML snippet?
To get the browser's HTML parser to do your dirty work for you:
// create an empty div
var div = document.createElement("div");
// fill it with your HTML
div.innerHTML = test;
// find the element whose text you want
test = div.getElementById("test");
// extract the text (innerText for IE, textContent for everyone else)
test = test.innerText || test.textContent;
Or in jQuery:
test = $(test).text();
If you use jQuery (I cannot believe I just said that ;)) you can get at the content immediately you wrap it in $(test).html
Someone else will tell you how to get at the innerHTML using a selector since everybody here are jQuery gurus but me
Update: somebody just did while I was editing: javascript: extracting text from html - see comments or updates to that
var test = getElementById('test')
try that