Indesign find text not in whole document - javascript

I'm searching for a way to find the text of a specific paragraph style in an InDesign document but without searching the whole document, instead, I want to search only inside a text frame or other object.
The only way I found for now is using document.findText() and setting the findTextPreferences, is there something like myTextFrame.findText()?

You can use app.selection[0].findTEXT()
app.selection is an array that contains what you are selecting in Indesign.
And the [0] is the first item of the array.
So, you can select the textFrame and do your search.
Or
myTextFrame = app.selection[0];
myTextFrame.findText();
also works.
This only works on single text frame.
If you want to search in more than 1 textFrame,
you may need to write a for loop to do it.

Related

Puppeteer select element id where beginning and end are dynamically generated

I'm trying to use puppeteer to select a dynamic element id. I've found how to select and element using just the beginning or just the end, but what I'm currently trying to do is find the element by the static part of the id in the center.
await page.waitForSelector('[id^="holder"][id$="_private_1"]');
In the above code snippet the original id looks like holder123456_private_1. I've gotten that part fine. However, the end of "_private_1" the number may change. So essentially I need the same code above but leave off the number at the end.
What you probably could do is to use '[id^="holder"][id*="_private_"]' as your selector (id starts with "holder" and has "_private_" somewhere in the id name. That would work if you don't have elements with e.g. id="holder123_not_private_321" which you don't want to target.
Otherwise i don't think there is any other selector options (https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)

How to avoid breaking block level HTML elements from partial selection?

The problem in a nutshell is: given a wysiwyg editor (CKEditor) you want to make a plugin doing text transformation - select a piece of text and manipulate the text in it (eg uppercase). Example:
this is paragraph one
this is paragraph two
If bold represents your selection the result would be
this is paragraph ONE
THIS is paragraph two
This issue here is the selection will be a complete HTML fragment, even when a selection is no containing the full tag. The selected HTML is:
<p>one</p> <p>this</p>
Notice the first and last <p> tags. When you do your dom traverse in the selection html, apply the text transformation and replace the html it will use those partial tags, so your result become:
this is paragraph
ONE
THIS
is paragraph two
I checked if it's possible to "merge" the first and last partial tags with their dom parents, however the selection object is isolated, it doesn't have siblings or parents from it's original context.
Also tried to find an option to retrieve the selection without these auto-fixed tags, but no luck.
On the CKEditor documentation they mention a walker object - however that automatically expands from the selection to the full enclosing tag, which means the selection is only used as a minimum boundary.
Also because the selection object is isolated, it's not possible to just change the dom node text values there - the original dom fragment needs to be replaced (at least in case of CKEditor).
I tried not to stick with the CKEditor api as much as possible, however at this point I don't see any alternatives either. Is this is really a hard problem or I'm missing something?
One solution is to use the browser engine to mark the selected area with a tag (afaik that's a native operation). This is the same as you make your selection bold or italic - however here it's gonna be a temporary wrapper. Then you walk the DOM and replace the content in the temporary tags - and finally remove the tag (keeping the content).
This makes sure you can apply your transformation on the exact selection and by removing the tag you won't break the original DOM. Steps in a nutshell:
apply tag on selection (use the browser or wysiwyg api)
find all temp tags:
recursively walk the children of the tag
if tag is text node then apply transformation
otherwise recursive walk
collect tag's left sibling text node + tag's html + right sibling text node
replace tag's parent html with the previous compilation (=remove temp tag)
Not too elegant however works. This is inspired by #Andrew_Mast's idea about wrapping in a span.
I would loop through all of the word(s) and for each set of words inside a different tag, surround it with <span style="text-transform: uppercase;"> and </span>

Using jQuery to get the content of div.class to replace content of title tag

I need to work around a limitation on my company's platform where pages can only be rendered with the filename as the title. I don't want to change my file-names to have values like, "This page title with spaces, and maybe illegal characters", because I don't want my URLs to have a bunch %20's and illegal characters in them, so I've been trying to figure out how to use the contents of another section of the page over which I do have control - the breadcrumb - as the "title".
I've been trying to use jQuery's .get and .replaceWith to replace the contents of the title tag with the contents of span.ms-pagetitle, which contains the part I can edit, but I'm a jQuery noob, and just haven't been able to suss it out.
This ought to do it:
$('title').text($('span.ms-pagetitle').text())
This should be run only once; usually inside a $(document).ready() function. The .ms-pagetitle element ought to have no children.
Two things are going on here:
$('span.ms-pagetitle').text() first selects any items matching span.ms-pagetitle. Hopefully there is just one, but it will grab them all. Use :first or another more specific selector to get the one you want. .text() will
Get the combined text contents of each element in the set of matched
elements, including their descendants, or set the text contents of the
matched elements.
...hence the idea to keep the span childless.
So that will result in a string of text.
$('title').text('string') will set the contents of a selected tag when passed a string (and get when used with no argument), so you are setting the selected title text as the contents of the <title> tag here.

Working with a narrowed down DOM using jQuery

I am currently trying to figure out a way to work within a selected <div> in order to be able to send a text formatted email.
So there is a button says "email". When a user clicks on it, it grabs a closest div as below.
var selectedDiv = $(callingElement).closest(".myClassName");
And from there I would like to grab various dom elements to create a clean text format. So how do I work within selectedDiv using jQuery?
For example,
Getting <h1> value.
Getting <li> value with certain class names
Getting "title" attribute value.
The selectedDiv jQuery object wraps the div element. Use the find method to search for descendant elements, and attr to get the attributes on the div element itself.
selectedDiv.find('h1');
selectedDiv.find('li.someClass');
selectedDiv.attr('title');
Call the text() method to get the text from the h1, or the li.
selectedDiv.find('h1').text();
selectedDiv.children('h1').text();
selectedDiv.children('li.className').text();
selectedDiv.attr('title');
But somehow I think you might be asking the "wrong" question.

How to select elements within a variable using jQuery?

I'm trying to make a simple image browser for TinyMCE which I am using in my CMS. As part of this I need to detect whether the user has selected an existing image, so I can display the "edit" form instead of the "choose an image form".
var selected_html = ed.selection.getContent();
var $elem = $(selected_html);
console.log($elem);
The first function returns the user selected text from the editor window as a string of HTML. I then would like to use jQuery (although plain javascript is just ok too) to check if this string contains an img tag before subsequently grabbing the src and title attributes for editing.
Now I've got as far as getting the html to turn into an object. But after this I can't manage to search it for the img element. After reading this (How to manipulate HTML within a jQuery variable?) I tried:
$elem.find('img');
But it just comes out as an "undefined" object...
I think I'm missing something fairly obvious here (it is getting late), but after an hour I still can't figure out how to grab the img tag from the selection. :(
Many thanks in advance.
Because the <img> is at the root of the jQuery object, you need to use .filter() instead of .find().
$elem.filter('img');
The .filter() method looks at the element(s) at the top level of the jQuery object, while .find() looks for elements nested in any of the top level elements.
If you're not sure beforehand where the target element will be, you could place the HTML into a wrapper <div> to search from. That way the HTML given will never be at the top.
var selected_html = ed.selection.getContent();
var $elem = $('<div>').html(selected_html);
var $img = $elem.find('img');
Try to see what is really inside your $elem variable. Just do a console.log($elem) using both Firefox and Firebug and you should be able to manage quite alright! ;)

Categories