I am creating a Javascript script to use with Indesign Server (CS3).
Trying to find all textareas within a document and find the contents of them.
I can easily loop through all the textareas, using the functions provided by Adobe.
However, when i try to get the content of the TextArea, I only get the content that is visible within that textarea, not the out port text.
document.TextAreas[0].contents
In other words, if the Indesign document contains a textarea with a little plus sign, indicating that there is more text, but it did not fit, then my script does not return the hidden text.
Or, to put it another words again. Can i get the entire content when the 'overflows' property of the 'textarea' is false;
Full code:
function FindAllTextBoxes(){
var alertMessage;
for (var myCounter = myDoc.textFrames.length-1; myCounter >= 0; myCounter--) {
var myTextFrame = myDoc.textFrames[myCounter];
alertMessage += "\nTextbox content: " + myTextFrame.contents;
alertMessage += "\nOverflow:" + myTextFrame.overflows;
alert(alertMessage);
}
}
How can I read the full content of the Textarea?
A little late, but just came across this. This is tested with InDesign CS5 - the following line will get all of the overflown text from a TextFrame:
var content = myTextFrame.parentStory.contents;
Hope this helps!
Related
So I have a long iframe in my website full of text. Iframe is from an other domain that I don't own so I have no control over this embedded iframe. What I do when I want to search a part of text in this iframe is to click CTRL+F and it will find the needed text and jump on that part of the iframe.
That was ok for as long as I used this page only for myself. Now that many people are accessing this iframe i can not explain the functionality of CTRL+F to everybody. So I was thinking to embed a Text search in this page where the iframe is so it will be easier for people to find what they want.
I tried many suggestions by this site but they don't really work with iframe since they search words in the page where the iframe is embedded. How CTRL+F can detect text from iframe? Is it possible to have same functionality embedded in my website?
Thank you
Did this other day using only Javascript maybe not the most efficient as it reads and re-writes the inner html onkeyup (so i had to make some regex to ignore tags) but it works and is quick let me know if you have any improvements.
I tried to put it in codepen but as it f**ks with innerhtml so it doesnt work but this might be up for a while:http://longstone.rocks/Cinturato/fitment-guide/
Note---id:matches is a <\p> under my search telling the user how many matches it found
<script>
function Search(){
//clear everyting
document.getElementById("matches").innerHTML = "Type to find your car!";
document.getElementById("main-content").innerHTML = document.getElementById("main-content").innerHTML.replace(/<span.+?>(.+?)<\/span>/g,'$1');
if (document.getElementById("textbox").value !== ""){
alert();
//this regegex basically matches all pattern exept from when its inbetween < and >
var searchterm = ("(?<!</?[^>]*|&[^;]*)(" + document.getElementById("textbox").value + ")");
var regex = new RegExp(searchterm,"gi");
w3.addClass('textarea', 'w3-border-red');
//if there is no match then it breaks in this following line when i want it to return 0 rather than break
var numberOfMatches = document.getElementById("main-content").innerHTML.match(regex).length;
alert(numberOfMatches);
alert("fdfd");
document.getElementById("main-content").innerHTML = document.getElementById("main-content").innerHTML.replace(regex,'<span class="w3-aqua">$1</span>');
document.getElementById("matches").innerHTML = numberOfMatches + " Matches highlighted scroll to see matches";
if(numberOfMatches !== 0)
w3.removeClass('textarea', 'w3-border-red');
}
else
w3.addClass('textarea', 'w3-border-red');
}
</script>
I have a web page where the text has characters (= soft hyphens) and other unusual entities mixed in. While these entities are necessary for correct display of the page, I would like to filter them out of text copied from the page to the clipboard.
1) Is this possible with JavaScript? I’m familiar with the onCopy event, but the examples I’ve seen don’t make the copied text available for further processing.
2) If so, what is the simplest way to accomplish it?
What I can’t do:
a) Change the characters in the web page at the server side.
b) Install JQuery or another JS framework just for this one function.
For a while, I thought that it was impossible to do it with JS only, but you can! You need to use the oncopy event handler, and change the selection to a temporary div containing the filtered text.
Here is an example:
function copyHandler() {
//Get the selected text
var selection = window.getSelection(),
// Filter it
newText = filterText( selection ),
// Create a div
newdiv = document.createElement('div');
// Hide it
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
// Insert the div in the body
document.body.appendChild(newdiv);
// Put the text in it
newdiv.innerHTML = newText;
// Select what's in the div
selection.selectAllChildren(newdiv);
// When the copy is over, remove the temporary div
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.addEventListener('copy', copyHandler);
function filterText(txt){
/* Do whatever you want here */
/* To show that it's working, I'll just return that string every time */
return 'I\'m a filtered String!';
}
JS Fiddle Demo
Try copy / pasting text in the Fiddle.
Both the $("<test") & document.createElement(",test") throws error due to < character associated to the text. I do not want to replace the character & wanted to see if there is option to create dom or jquery object using such text. I know replace will work but since the code is pre-existing & also since code is written such that it assume it can either have the simple text (textnode) or html tag (like span) hence this error is occuring as it fails to check if it is proper self closing html tag.
I am thinking of creating it to xml node & then check if the childnode is textNode or not before trying to create jquery object,however I am looking for suggestion & best approach to tackle such issue. I know replace of < will work & also there is no need to check for attributes of plain text but since the code is dynamic it sometimes retrieves plain text & some time it gives valid html tag that why this issue appears
I am not sure what your exact end goal is, but basically you need to do something like this:
function makeElemHack( str ) {
var div = $("<div>").html(str); //create a div and add the html
var html = div.html(); //read the html
if (!html.length) { //if the html has no length the str was invalid
div.html(str.replace(/</g,"<")); //escape the < like text should be
//div.text(str); //or you can just add it as plain text
}
return div; //with the div wraper
//return div.contents(); //without the div wrapper
}
var bd = $("body");
bd.append( makeElemHack("<p>Hello</p>") );
bd.append( makeElemHack("1<0") );
bd.append( makeElemHack("<booo") );
When a user create a message there is a multibox and this multibox is connected to a design panel which lets users change fonts, color, size etc.. When the message is submited the message will be displayed with html tags if the user have changed color, size etc on the font.
Note: I need the design panel, I know its possible to remove it but this is not the case :)
It's a Sharepoint standard, The only solution I have is to use javascript to strip these tags when it displayed. The user should only be able to insert links, images and add linebreaks.
Which means that all html tags should be stripped except <a></a>, <img> and <br> tags.
Its also important that the attributes inside the the <img> tag that wont be removed. It could be isplayed like this:
<img src="/image/Penguins.jpg" alt="Penguins.jpg" style="margin:5px;width:331px;">
How can I accomplish this with javascript?
I used to use this following codebehind C# code which worked perfectly but it would strip all html tags except <br> tag only.
public string Strip(string text)
{
return Regex.Replace(text, #"<(?!br[\x20/>])[^<>]+>", string.Empty);
}
Any kind of help is appreciated alot
Does this do what you want? http://jsfiddle.net/smerny/r7vhd/
$("body").find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
Basically select everything except a, img, br and replace them with their content.
Smerny's answer is working well except that the HTML structure is like:
var s = '<div><div>Link<span> Span</span><li></li></div></div>';
var $s = $(s);
$s.find("*").not("a,img,br").each(function() {
$(this).replaceWith(this.innerHTML);
});
console.log($s.html());
The live code is here: http://jsfiddle.net/btvuut55/1/
This happens when there are more than two wrapper outside (two divs in the example above).
Because jQuery reaches the most outside div first, and its innerHTML, which contains span has been retained.
This answer $('#container').find('*:not(br,a,img)').contents().unwrap() fails to deal with tags with empty content.
A working solution is simple: loop from the most inner element towards outside:
var $elements = $s.find("*").not("a,img,br");
for (var i = $elements.length - 1; i >= 0; i--) {
var e = $elements[i];
$(e).replaceWith(e.innerHTML);
}
The working copy is: http://jsfiddle.net/btvuut55/3/
with jQuery you can find all the elements you don't want - then use unwrap to strip the tags
$('#container').find('*:not(br,a,img)').contents().unwrap()
FIDDLE
I think it would be better to extract to good tags. It is easy to match a few tags than to remove the rest of the element and all html possibilities. Try something like this, I tested it and it works fine:
// the following regex matches the good tags with attrinutes an inner content
var ptt = new RegExp("<(?:img|a|br){1}.*/?>(?:(?:.|\n)*</(?:img|a|br){1}>)?", "g");
var input = "<this string would contain the html input to clean>";
var result = "";
var match = ptt.exec(input);
while (match) {
result += match;
match = ptt.exec(input);
}
// result will contain the clean HTML with only the good tags
console.log(result);
Before any asks, I did research this thoroughly and the answer has not been post here previously.
I want to send some plain text configuration text to the clipboard with Javascript. The text will consist of multiple commands, one command per line, so that the user may then past into a configuration file on his PC (call it "myconfig.ini") using a text editor (most commonly, Notepad.exe).
I tried the following:
var cCRLF = String.fromCharCode(10,13);
var cText = 'This is command line 1'+cCRLF;
cText += 'This is command line 2'+cCRLF;
cText += 'This is command line 3'+cCRLF;
cText += 'This is command line 4';
window.clipboardData.setData('Text', cText);
but when I execute and paste into notepad, I don't get individual lines and the line return character (cCRLF) is not viewable (that nasty little box character appears).
Does someone have a solution for this?
The solution is to use back-tick (` `)
alert(`string text line 1
string text line 2`);
For reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
I would suggest using some other method than the clipboard for sending data to the user. This method only works in IE and can be disabled (and newer IE versions prompt first): Get clipboard data as array in javascript
A CSS popup box (which the user can copy from themselves) would probably be a nicer (and cross-platform) solution. This might help: http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/
I think i did find a solution. It's a bit weird, but hey, it's for IE. It's a modified snippet I found on stackoverflow.
<body>
<a href="#" onclick='test("This\nIS\nA\nTEST")'>TEST</a>
<div id="cb" style="position: absolute; left: -2000px"></div>
</body>
<script>
function test(cText) {
cText= cText.replace(/\n\r?/g, "<br>");
// create an editable DIV and append the HTML content you want copied
var editableDiv = document.getElementById("cb");
with (editableDiv) {
contentEditable = true;
}
editableDiv.innerHTML= cText;
// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(document.body);
r.select();
}
</script>