How to replace string without losing text format already done to a part of text in content editable div

Question

0.00/5 (No votes)

See more:

, +

I have a div whose conenteditble property set to true.

Assume, user has typed something like

The :lazy brown fox jumps over a super :lazy dog

Now, I would like to replace second ":lazy" appears in the sentence. This is dynamic. The sentence may contain any number of ":lazy" (or "any word" which must be replaced with "some text") and only required one has to be replaced. This has to be done without losing text format already done to the sentence.

Below is the code (courtesy of Peter Leow who given this solution) which replaces only first word in the sentence.

XML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#rewrite").click(function(){
      var regex=/\.*[:]\S*/

      var originalHtml = $('#editableDiv').html();
      var newHtml = originalHtml.replace(regex,"sleeping");
      $('#editableDiv').html(newHtml);

  });
});
</script>
</head>
<body>
<form name="myform">

<div id="editableDiv"  contenteditable="true">
        the quick <b><i>brown</i></b> fox jumps over a <b><i>:lazy </i></b>dog
</div>

<input type="button" id="rewrite" value="Rewrite">

</form>

</body>
</html>

I would like to modify this to suit needs explained above. Thanks

Posted 28-Dec-13 18:08pm

Basavaraj Metri

Updated 28-Dec-13 18:38pm

v3

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 29-Dec-13 0:23am

What have you tried?

Basavaraj Metri 29-Dec-13 0:37am

Hi Tadit. I edited code. Added what I tried. Thanks.

Peter Leow 29-Dec-13 7:49am

As promised, see solution 1. Sorry for taking so long, just get off the plane.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2013-12-29T01:45:00

Solution 1

Check out my demo code at jsfiddle[^]
It is fully commented so as to convey the idea as clearly as possible. Hope it helps.

Posted 29-Dec-13 1:45am

Peter Leow

Comments

Basavaraj Metri 30-Dec-13 0:15am

Thanks Peter. You are my Saviour. Your solution works unless sentence has inline span tag with style attributes defined in it. Here (http://jsfiddle.net/Daedalus/M4BaH/) I fixed regEx. Thanks. again

Peter Leow 30-Dec-13 0:19am

Well done. Happy New Year to you. Cheer!

Basavaraj Metri 30-Dec-13 0:45am

Happy New Year to you as well Peter. I have one more unsolved question. Hope you have the right answer for it. Here is the link http://www.codeproject.com/Questions/703618/How-to-get