[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Append xhtml tags at arbitrary places in a text.

Posted on 2009-04-19
4
Medium Priority
?
289 Views
Last Modified: 2013-11-19
Hi Experts,

I'd like to be able to enclose snippets of existing text on a webpage at the click of a button. Kind of what jQuery's append does, but more arbitrary. It is my understanding that jQuery can append, say, <strong> tags to a pre-existing text without refreshing the page, but for that, the text has to be marked (i.e. it is possible to add <strong> to a <span>).

What I'd like to achieve is to append <strong> or <span> tags at arbitrary places, based on their offset (offset here means what window.getSelection().getRangeAt(0) can return).

Example:

<p span="line1">I want to ride my bicycle, I want to ride my bike.</p>

The function would be something like addStrong('line1', 15, 25); and it would transform the text like this:

<p span="line1">I want to ride <strong>my bicycle</strong>, I want to ride my bike.</p>

Any idea how to do that, in jQuery or pure Javascript?
0
Comment
Question by:CPL593H
  • 3
4 Comments
 
LVL 7

Accepted Solution

by:
bui_trung_hieu earned 1500 total points
ID: 24181160
Try the function below



//addStrong('line1', 15, 25);
function addStrong(_oid, _start, _end){
  //check element existence
  if($('p[span='+_oid+']').length==0) return;
  //select the element
  var content=$('p[span='+_oid+']').html();
  //set new html
  $('p[span='+_oid+']').html(content.substr(0,_start)+ '<strong>'+content.substr(_start, _end-_start)+ '</strong>'+content.substr(_end,content.length-_end))
}

Open in new window

0
 

Author Comment

by:CPL593H
ID: 24181352
Hi,

Nice start.

First, sorry for my stupid typo. I meant , of course. I fixed it in the example code below, it should be OK now.

I wrote the example code below to show an annoying shortcoming of the script: if you click on the second link and then on the first link, it works. It you reverse the sequence (click on the first link then the second link), it fails. That is because the offsets are changed because of the insertion of a (17 characters). addStrong('line1', 46, 58); would perfectly work after having clicked on the first link. My goal is to be able to add an undefined number of 's and 's, so I can't use the script as is.

Counting the added tags lengths may become quickly hairy, so maybe a regexp ignoring everything between <> (and re-adding later) would do the trick. I don't master JS regexps enough to try it, though. It would give as an added bonus that with a slight modification, we could  also use variable-length tags, such as .

Do you think it's feasible? Or do you see another workaround to this problem?

Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	<!--
	// addStrong('line1', 15, 25);
	function addStrong(_oid, _start, _end) {
		//check element existence
		if ($('p#'+_oid).length==0) return;
		//select the element
		var content=$('p#'+_oid).html();
		//set new html
		$('p#'+_oid).html(content.substr(0,_start)+ '<strong>'+content.substr(_start, _end-_start)+ '</strong>'+content.substr(_end,content.length-_end))
	}
//-->
</script>
</head>
<body>
<p id="line1">I want to ride my bicycle, I want to ride my bike.</p>
<p><a href="javascript: addStrong('line1', 2, 14);">make the first "want to ride" bold</a></p>
<p><a href="javascript: addStrong('line1', 29, 41);">make the second "want to ride" bold</a></p>
</body>
</html>

Open in new window

0
 

Author Comment

by:CPL593H
ID: 24181358
(EE has the irritating habit of eating my lesser than and greater than signs, so here is the same texts, where the signs have been replaced by inoffensive [].)

Hi,

Nice start.

First, sorry for my stupid typo. I meant [p id="line1"], of course. I fixed it in the example code below, it should be OK now.

I wrote the example code below to show an annoying shortcoming of the script: if you click on the second link and then on the first link, it works. It you reverse the sequence (click on the first link then the second link), it fails. That is because the offsets are changed because of the insertion of a [strong][/strong] (17 characters). addStrong('line1', 46, 58); would perfectly work after having clicked on the first link. My goal is to be able to add an undefined number of [strong]'s and [span]'s, so I can't use the script as is.

Counting the added tags lengths may become quickly hairy, so maybe a regexp ignoring everything between [] (and re-adding later) would do the trick. I don't master JS regexps enough to try it, though. It would give as an added bonus that with a slight modification, we could  also use variable-length tags, such as [span style="color: red"].

Do you think it's feasible? Or do you see another workaround to this problem?

Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	<!--
	// addStrong('line1', 15, 25);
	function addStrong(_oid, _start, _end) {
		//check element existence
		if ($('p#'+_oid).length==0) return;
		//select the element
		var content=$('p#'+_oid).html();
		//set new html
		$('p#'+_oid).html(content.substr(0,_start)+ '<strong>'+content.substr(_start, _end-_start)+ '</strong>'+content.substr(_end,content.length-_end))
	}
//-->
</script>
</head>
<body>
<p id="line1">I want to ride my bicycle, I want to ride my bike.</p>
<p><a href="javascript: addStrong('line1', 2, 14);">make the first "want to ride" bold</a></p>
<p><a href="javascript: addStrong('line1', 29, 41);">make the second "want to ride" bold</a></p>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:CPL593H
ID: 31572010
I changed a bit the expected behavior of my application so that it could work with this script (with heavy modifications). Thanks.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

868 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question