我有一个 div，其 conenteditble 属性设置为 true。
假设，用户输入了类似的内容
:lazy brown fox jumps over a super :lazy dog
现在，我想替换句子中出现的第二个“:lazy”。这是动态的。句子可以包含任意数量的“:lazy”(或必须用“some text”替换的“any word”)，并且只需要替换一个。这必须在不丢失已经对句子完成的文本格式的情况下完成。
这是我试过的。这将始终替换单词的第一次出现。
<!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>
最佳答案
假设正则表达式变量设置如下:
// 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).
它不应该修改任何周围的标签。当然，我没有给出所有测试用例，因为我想不出很多，但它有效 here用我给它的东西。
您可能已经知道，\S正则表达式中的字符是一个否定的空格字符，这意味着它很像点 (.)，因为它几乎可以匹配任何字符。这包括括号(<>)，这会导致它匹配 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
});
这是一个demo证明以上内容。
关于javascript - 如何在不丢失文本格式的情况下替换内容可编辑 div 中部分文本的文本格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20822355/