Javascript 如何替换字符串而不丢失内容可编辑div中部分文本的文本格式
我有一个div，其conenteditable属性设置为true 假设，用户键入了如下内容 懒棕色狐狸跳过一只超级懒狗 现在，我想替换句子中出现的第二个“：lazy”。这是动态的。该句子可以包含任意数量的“：lazy”（或“任何单词”，必须替换为“某些文本”），并且只需替换一个必需的单词。必须在不丢失已对句子进行的文本格式的情况下完成此操作。Javascript 如何替换字符串而不丢失内容可编辑div中部分文本的文本格式,javascript,jquery,regex,Javascript,Jquery,Regex,我有一个div，其conenteditable属性设置为true 假设，用户键入了如下内容 懒棕色狐狸跳过一只超级懒狗 现在，我想替换句子中出现的第二个“：lazy”。这是动态的。该句子可以包含任意数量的“：lazy”（或“任何单词”，必须替换为“某些文本”），并且只需替换一个必需的单词。必须在不丢失已对句子进行的文本格式的情况下完成此操作。 这是我试过的。这将始终替换第一次出现的单词 <!DOCTYPE html> <html> <head> <scr
这是我试过的。这将始终替换第一次出现的单词
<!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>
$（文档）.ready（函数（）{
$（“#重写”）。单击（函数（）{
var regex=/\.*[：]\S*/
var originalHtml=$（'#editableDiv'）.html（）；
var newHtml=originalHtml.replace（regex，“sleeping”）；
$（'#editableDiv'）.html（newHtml）；
});
});
那只敏捷、懒惰的棕色狐狸跳过了一只懒惰的狗
// 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).
\Svar 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
});
下面是一个演示上述内容的示例。如果您需要仅替换第二个，您可以使用以下代码：
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);
var re=/（（？：\\s？）（[：]\w+（？！\w*[；]）（（？：\s？\）（（？：（？！\1\2\3））*）{1}）\1\2\3/；
var str='Lorem ipsum dolor:拍卖人坐在阿梅特，奉献：拍卖人告别精英。我的名字是：埃吉特·埃尼姆·波苏尔·卡苏斯·亨德雷特拍卖人整数id mauris ipsum。在《智者元素》中：auctor eget sem porttitor eu ultricies mauris：auctor；
var replacement=“在此处替换！！”；
响应=str.replace（re，“$1$2$3$4$1”+replacement+“$3”）；
文件。写（“”）；
文件。书写（回复）；
：auctor{1}{2}/（（？：\\s？）（[：]\w+（？！\w*[；]）（？：\s？）（（？：（？：（？：（？！\1\2\3））*）{2}\1\3/（按照同样的推理，如果你想要第四个，增加到
{3}快速：懒惰的棕色狐狸跳过：懒惰的狗。在正常搜索中，它会替换第一个匹配的单词。这句话怎么能代替第二句：懒惰。为了更清楚，我也编辑了我的句子。最重要的是，你的回答确实很有帮助。Thanks@Metri，我会看看我能想出什么给你编辑。以上是我认为你想要的；如果不是这样，我将着手解决。这是我坚持的核心部分。将根据我的需要进行修改。我接受了你的回答。谢谢。