Find/replace html/text with jQuery

#1

Looking for help replacing text with javascript/jquery in Axure? I’m trying to build an Axure plugin that searches for ‘/n’ within repeater data then replaces with html line break.

I’m not the most jQuery-literate person. This is what I have so far:

javascript:void($axure(’@output-box’).text(function(index,html){
return html.replace(’/n’,‘BUTT’);
}))

I’m prototyping the functionality locally then will build the plugin accordingly. So the interactions are currently on the repeater textbox and NOT Axure Share:

jqueryrepeater.rp (49.1 KB)

*Note: the textbox within the repeater is called ‘output-box’

Soft line breaks in Repeater's dataset
#2

Special characters are escaped with \ not /

Try replace('\n','BUTT')

#3

I’ve tried that, and nada. I’ve also simply tried replacing 2 with 3 since those contain no special characters and no luck either.

I’ve tried with with:
text.replace
html.replace
replace

no luck.

This:
javascript:void($axure(’@output-box’).text(‘Changed’))

… changes all the text but the problem occurs when I add a replace function.

#4

Haven’t done much AxQuery stuff in a while but I think the problem is that while AxQuery methods will work on all the widgets with the shared name (ex.: moveBy()) in this case you probably need to iterate through all the child elements that contain the actual text. if you look at the markup of an Axure widget you’ll see they’re made up of quite a few elements. There’s no AxQuery method available on the object that’s equivalent to a Set Text action as far as I can tell.

In this case you might have better luck just using jQuery to return a collection of nodes and then iterating through each one and updating its child element that contains the text.

$('[data-label=output-box]') will get you started. In other words, leave out the AxQuery and just do it the normal jQuery way.

#5

So if I run something like:
javascript:void($axure(’@output-box’).text(‘Changed’))
it will change ALL text, but if I want to find/replace I’ll need to iterate through a collection one at a time? I guess that makes sense. I was just hoping for a simple find THIS and replace with THAT!

So it goes. Thanks for the help!

#6

Ok, I see. Looks like it’s because the AxQuery object has a text() method that handles all that, but has not implemented a replace-like method that handles everything for you.

#7

Yep. I can change all text on all repeater rows, but as soon as I try to run a function within the .text() it goes to crap.

#8

Hi guys!

Rather than using plugins or jQuery to get line breaks in the repeater dataset, you can use the .replace( , ) method in the Set Text action for the repeater’s OnItemLoad:

OnItemLoad
Set text on [widget] equal to [[Item.ColumnName.replace(‘sometext’,’\n’)]]

where “sometext” is the text you include in the dataset specifically for line breaks, e.g. “< br >”

Linebreak.rp (51.1 KB)

Request for tutorials - slider + animating text
Soft line breaks in Repeater's dataset
#9

You’re joking! I just assumed \n wouldn’t do anything when used with replace. Thanks for the insanely obvious solution! haha

Now, in the name of learning, how would I go about doing this in the overly-complicated way with jQuery and Axure Share plugins?

#10

Hi!

This plugin (end of head) works for replacing repeater text. It wold replace “dog” with “cat”

<script>
  $(document).ready(function() {
    $("span").each(function(index) {
      if ($(this).text() == 'dog') {
        $(this).text('cat')
      }
   });
 });
</script>

[ Edit ] Oh, wait. You wanted substring replacement. This replaces all x’s with o’s:

 <script>
  $(document).ready(function() {
    $("span").each(function(index) {
      $(this).text($(this).text().replace('x','o'));
   });
 });
</script>

If you wanted to target text in the repeater only, you would change the line with the span selector to this, where repeaterName is the name of the repeater:

$("[data-label='repeaterName'] span").each(function(index) {
#11

Fantastic! Thanks for figuring this one out. One peculiarity though, when I replace with a break (ie. \n,
, etc.) it only shows as whitespace on the rendered page; however, it shows as line breaks in the actual HTML.