如何在內容可編輯div中替換字符串而不丟失已經對部分文本執行的文本格式

Question

我有一個div，其conenteditble屬性設置為true。

假設用戶輸入了類似

的：懶惰的棕色狐狸跳過了一只超：懶狗

現在，我想替換句子中出現的第二個“：lazy”。 這是動態的。 該句子可以包含任意數量的“：lazy”（或“任何單詞”，必須用“某些文本”替換），並且僅需要替換一個即可。 必須做到這一點，而又不會丟失已經在句子中完成的文本格式。
這是我嘗試過的。 這將始終替換單詞的首次出現。

<!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>:lazy</i></b> <b><i>brown</i></b> fox jumps over a <b><i>:lazy<span style="color:red;"> dog </span></i></b>dog
</div>
<input type="button" id="rewrite" value="Rewrite">
</form>
</body>
</html>

Answer 1

假設正則表達式變量設置為：

//                               v - make the search global
var regex = /\.*[:]\w+(?!\w*[;])/g
//Only word letters ^^ ^- negative look-ahead; make sure that the characters
//one or more matches|    do not have a semi-colon following them(like inline
//                        css styles).

它不應修改任何周圍的標簽。 當然，我還沒有給出所有的測試用例，因為我想不起很多，但是它在這里與我給出的一樣有效。

您可能已經知道，正則表達式中的\\S字符是一個取反的空格字符，其含義與dot（。）非常相似，因為它幾乎可以與任何字符匹配。 這包括方括號（ <> ），這將使其與html匹配，從而破壞您擁有的html字符串。

編輯：

由於javascript沒有負面影響，我認為，我的答案是一種hack。.但是它可以工作並且可以配置：

使用以下命令替換對replace方法的調用：

var regex = /\.*([:]\w+(?!\w*[;]))/g;//A change here to make it match group
var originalHtml = $('#editableDiv').html(); // Didn't change anything here, just
                                             // included it to not break anything
var mi = 1; //match index
var newHtml = originalHtml.replace(regex, function() {
    var ret = (mi == 2)?'sleeping':arguments[0];
    //         boolean   if true    if false
    // The above is a ternary operator in case you weren't aware.  arguments is
    // an array composed of all arguments sent to the anonymous function, with
    // the first being the match, then the match groups, then the position in
    // the string in which is is found, and finally the full string it was
    // matched against.

    // The above if/then/else operator checks if the match index(mi) is equal to
    // the position of 2, if it is, then return 'sleeping', if not, return the 
    // match word

    mi++; //increase match index by one, every time function is ran
          //as it is ran each time there is a grouped match
    return ret; //return return variable
});

這是演示上述內容的演示。

Answer 2

如果有機會僅需要替換第二個，則可以使用以下代碼：

var re = /((?:\<[^<>]+\>\s?)?)([:]\w+(?!\w*[;]))((?:\s?\<\/[^<>]+\>)?)((?:(?:.(?!\1\2\3))*.){1})\1\2\3/;

var str = 'Lorem ipsum dolor <b>:auctor</b> sit amet, consectetur <b>:auctor</b> adipiscing elit. Suspendisse eget enim posuere mi cursus hendrerit. <b>:auctor</b> Integer id mauris ipsum. In elementum sapien <b>:auctor</b> eget sem porttitor eu ultricies mauris <b>:auctor</b>.';

var replacing = "replaced here!!";

response = str.replace(re,"$1$2$3$4$1" + replacing + "$3");

document.write('<pre>');
document.write(response);

在代碼中，我們僅替換了:auctor出現的第二個匹配項（不丟失文本格式標記）

另外，如果只想替換第三個，只需將語句{1}增加到{2} ，使表達式類似於/((?:\\<[^<>]+\\>\\s?)?)([:]\\w+(?!\\w*[;]))((?:\\s?\\<\\/[^<>]+\\>)?)((?:(?:.(?!\\1\\2\\3))*.){2})\\1\\2\\3/ 。

（遵循相同的理由，如果您想要第四個，則增加到{3} ，依此類推...）

如何在內容可編輯div中替換字符串而不丟失已經對部分文本執行的文本格式

問題描述

2 個解決方案

解決方案1
1 已采納 2013-12-29 06:54:42

解決方案2
0 2013-12-29 08:46:57

如何在內容可編輯div中替換字符串而不丟失已經對部分文本執行的文本格式

問題描述

2 個解決方案

解決方案1 1 已采納 2013-12-29 06:54:42

解決方案2 0 2013-12-29 08:46:57

解決方案1
1 已采納 2013-12-29 06:54:42

解決方案2
0 2013-12-29 08:46:57