Anyone here know how to use jQuery?

JonathanTheBlack · Post by **JonathanTheBlack** » Tue Jul 05, 2011 9:58 pm

I would like to add a script to my web pages that replaces [this] with <a href="this.html">this</a>. I want to do this to cut down on HTML soup for long passages of text where I want a wiki like functionality on my page. Thanks!

Post by **aliasmask** » Tue Jul 05, 2011 10:34 pm

You can use javascript. Basically you search the document for the key word. If you can narrow the search down to a div tag with a specific id it'll make the replace go smoother.

But JQuery does give you shortcuts if it's already installed. I found this line online doing a search for jquery find and replace:

Code: Select all

$('body').html($('body').html().replace('Original Text','New Text'));

It takes any html in the body tag and replaces and sets the text. But it indiscriminately replaces that key word no matter where it is and what context it's being used in. You can use '#id' instead of body to replace html only with tags with that id. But I think you have to add each on to it like this (id is the id value for the tag, so if your tag was myText it would be $('#myText').):

Code: Select all

$('#id').each(
   function () {
      this.html = this.html().replace('Original Text','New Text');
   });

It's been awhile for me, so if someone else can confirm this works. You don't need each if there is only one tag to be replaced on the page. If that's the case you can use the first example and just replace body with #id.

edit: Now, if you have a key word list that can be loaded on to the page, then instead of a static string, it could be dynamic and you can then loop to replace based on the key word. Also, your keywords should probably be encoded or changed to be url safe.

JonathanTheBlack · Post by **JonathanTheBlack** » Wed Jul 06, 2011 7:58 am

This is what I want to write in my .html file:

Code: Select all

<div id="content">
    <p>Adventuring [gear], [armor], [weapons], and [implements] are an important part of any adventurer's career. Their equipment is often all that stands between them and death. Each adventurer begins their career with a set of armor, a few weapons or implements, and a handful of coins in their pocket for adventuring goods. Characters start with one set of armor, up to three weapons or implements, and 100 silver to spend on adventuring gear. A shield may be chosen in place of a weapon or implement.</p>
</div>

This is what I want it to look like when someone loads the page:

Code: Select all

<div id="content">
    <p>Adventuring <a href="gear.html">gear</a>, <a href="armor.html">armor</a>, <a href="weapons.html">weapons</a>, and <a href="implements.html">implements</a> are an important part of any adventurer's career. Their equipment is often all that stands between them and death. Each adventurer begins their career with a set of armor, a few weapons or implements, and a handful of coins in their pocket for adventuring goods. Characters start with one set of armor, up to three weapons or implements, and 100 silver to spend on adventuring gear. A shield may be chosen in place of a weapon or implement.</p>
</div>

All I want to do is make the text parts of my web page more readable and less like HTML soup.

Post by **aliasmask** » Wed Jul 06, 2011 11:37 am

Try this:

Code: Select all

var c = $("#content"); 
c.html( c.html().replace(/\[([^\]]*)\]/g,"<a href="$1.html">$1</a>") );

JonathanTheBlack · Post by **JonathanTheBlack** » Wed Jul 06, 2011 12:49 pm

Um... where? :oops:

Post by **aliasmask** » Wed Jul 06, 2011 12:56 pm

Put this at the top and modify the body tag.

Code: Select all

<html>
<head>
<script type="text/javascript">
   function load() {
      var c = $("#content"); 
      c.html( c.html().replace(/\[([^\]]*)\]/g,"<a href="$1.html">$1</a>") );
   }
</script>
</head>
<body onload="load()">...</body>
</html>

JonathanTheBlack · Post by **JonathanTheBlack** » Wed Jul 06, 2011 1:05 pm

Doesn't seem to be working, but at least it's got me going in the right direction. :) Thank you.

Code: Select all

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
   function load() {
      var c = $("#content");
      c.html( c.html().replace(/\[([^\]]*)\]/g,"<a href="$1.html">$1</a>") );
   }
</script>
</head>
<body onload="load()">
	<div id="content">
		This is a [test].
	</div>
</body>
</html>

syntruth · Post by **syntruth** » Wed Jul 06, 2011 4:07 pm

Don't use onload calls; there are issues with doing so. jQuery provides a "ready" action for this:

Code: Select all

$('document').ready(function () {

  /* Loop through each .content div and replace as needed. */
  $(".content").each(function() {
    var c    = $(this),
        html = c.html().replace(/\[([^\]]*)\]/g, "<a href='$1.html'>$1</a>");
    c.html(html);
  });
});

...also, better to use a class on the divs you want to have replacement happen in, since a page can have at most one element with a given #id, and jQuery honors this. If you use $() to search for an #id element and there are more than one on the page, jQuery will always return the first one found. I've changed to using '.content' in the code above.

EDIT: Also, might I suggest http://stackoverflow.com/ for questions like this; very helpful folks there.

Post by **aliasmask** » Wed Jul 06, 2011 4:15 pm

JonathanTheBlack wrote:Doesn't seem to be working, but at least it's got me going in the right direction.

Thank you.

Code: Select all

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
   function load() {
      var c = $("#content");
      c.html( c.html().replace(/\[([^\]]*)\]/g,'<a href="$1.html">$1</a>') );
   }
</script>
</head>
<body onload="load()">
	<div id="content">
		This is a [test].
	</div>
</body>
</html>

I changed the above to have the correct nesting of quotes.

edit: Yeah, I would suggest using ready as well. If onload is used by any other scripts, only the last one will take effect. ready actually queues up the onload scripts. It's been awhile, I forgot about using ready. And using a class is better for multiple locations.

Code: Select all

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$('document').ready(function () {

  /* Loop through each .content div and replace as needed. */
  $(".content").each(function() {
    var c    = $(this),
        html = c.html().replace(/\[([^\]]*)\]/g, '<a href="$1.html">$1</a>');
    c.html(html);
  });
});
</script>
</head>
<body>
   <div class="content">
      This is a [test] inside a div.
   </div>
   <table><tr><td>Test [column] 1 with no class</td><td class="content">Test [column] 2 inside a table</td></tr></table>
</body>
</html>

JonathanTheBlack · Post by **JonathanTheBlack** » Wed Jul 06, 2011 5:17 pm

Awesome. Got the test page to work, but when I tried to make it a function and move it into a .js file, it stopped working. :(

Never mind. Figured out what I did wrong by trial and error!

Yay it's working. I messed around with RegExr and now it will do bold and italic text as well. I think the last thing I really need is how to do bold and italic at the same time without screwing up something else.

http://dl.dropbox.com/u/33654550/index.html
http://dl.dropbox.com/u/33654550/scripts/simple-wiki.js

I can finally start adding content. Yay.

jfrazierjr · Post by **jfrazierjr** » Wed Jul 06, 2011 5:44 pm

JonathanTheBlack wrote:Awesome. Got the test page to work, but when I tried to make it a function and move it into a .js file, it stopped working.

Never mind. Figured out what I did wrong by trial and error!

Yay it's working. I messed around with RegExr and now it will do bold and italic text as well. I think the last thing I really need is how to do bold and italic at the same time without screwing up something else.

http://dl.dropbox.com/u/33654550/index.html
http://dl.dropbox.com/u/33654550/scripts/simple-wiki.js

I can finally start adding content. Yay.

Put a class onto the link element and define the class CSS properly.. done...

Code: Select all

c.html( c.html().replace(/\[([^\]]*)\]/g,'<a href="$1.html" class="myclass" >$1</a>') );

JonathanTheBlack · Post by **JonathanTheBlack** » Wed Jul 06, 2011 6:00 pm

Ah, that's not what I meant. :)

I mean **taking** //this// and **//that//** and turning it into:

taking this and that without some screwy problems with nested syntax.

It's much easier when writing and reading html to just be able to [link] **bold** and //italic// text inline this way than it is to <A href="link.html">link</a> <span style="font-weight: bold;">bold</span> and <span style="font style: italic;">italic</span> with all that html soup.

JonathanTheBlack · Post by **JonathanTheBlack** » Fri Jul 08, 2011 7:37 am

I've decided to not use this stuff for formatting and am instead using it just for links and glossary links. Is there an easy way to remove the white spaces from $1 or replace them with a single dash?

Azhrei · Post by **Azhrei** » Fri Jul 08, 2011 6:36 pm

JonathanTheBlack wrote:Is there an easy way to remove the white spaces from $1 or replace them with a single dash?

Hm. If you want something that is portable across most (all?) browsers, the quickest way is probably to split the string up wherever there's a space, then join the resulting array back together again. The .split() and .join() methods of the String object are quite reliable between browser versions.

RPTools.net

Anyone here know how to use jQuery?

Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?

Re: Anyone here know how to use jQuery?