How to replace string given its “starting index” and “string to replace” in an editable div

Question

4.00/5 (1 vote)

See more:

, +

I am working on string replacement in an contenteditable div. When user types ':', I store its index in some variable.

Consider example 1:

JavaScript

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

According to above example, the starting index is 34 and the end index must be the index of near by white space i.e., 39 and the replacing string is *sleeping*.
Given that, the ouput must be the quick brown fox jumps over a sleeping dog

Consider example 2:

JavaScript

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

According to above example, the starting index is 39 and the end index must be the index of near by white space (but in this case, it must be an EOL) and the replacing string is *cat*.
Given that, the output must be the quick brown fox jumps over a lazy cat

I tried with below code but user would eventually lose his/her format already done to the part of the document (for ex: brown may be bolded, jumps may be italicised).

JavaScript

$('#editableDiv').text($('#editableDiv').text().replace(searchString, replaceString));

I even tried with

JavaScript

$('#editableDiv').html($('#editableDiv').html().replace(searchString, replaceString)); but `.html()

` will return string with html code thus index may vary accordingly.

The question remains is how to replace string without losing its format given, starting index for search and replace string.

Posted 27-Dec-13 1:07am

Basavaraj Metri

Updated 27-Dec-13 1:11am

v3

Add a Solution

Comments

Sunasara Imdadhusen 27-Dec-13 7:16am

Are you getting any error??

Basavaraj Metri 27-Dec-13 7:34am

No but I have no idea how to solve this issue. I have written function to capture character index once user type ':' but have no clue how I can replace string I already have within me with the string typed after ':' till the first occurrence of white space. Thanks

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-27T03:48:00

Solution 1

This is an interesting question, I use regex to solve it, see demo code below, note the little trick of leaving a white space between the last character of the target word and the formatting tag that follows:

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>

Posted 27-Dec-13 3:48am

Peter Leow

Updated 27-Dec-13 4:02am

v3

Comments

Basavaraj Metri 28-Dec-13 11:05am

Thanks Peter. I think this will fail if sentence contains more than one :lazy. It will eventually replace all available ":lazy" with "sleeping". Am I right?

Peter Leow 28-Dec-13 11:15am

No, it will not. only the first occurrence of :. Try pasting the whole code into the "Try it yourself" here w3c js and experiment with it.

Basavaraj Metri 28-Dec-13 11:35am

Thanks Peter, this would certainly help but I have got one more doubt, how can I replace only a particular word. Say for example I have a sentence like "the :lazy brown fox jumps over a :lazy dog". Now I would like to modify second ":lazy" only. How can I do this.

Peter Leow 28-Dec-13 14:23pm

I think it certainly can be done. I would consider that as another question.

Basavaraj Metri 28-Dec-13 23:24pm

Thanks a tonne Peter. I'll accept your answer and raise a new question regarding second word replacement. Thanks.

Basavaraj Metri 29-Dec-13 0:11am

Hi Peter. Here is my second question http://www.codeproject.com/Questions/703355/How-to-replace. Thanks.