问题描述
在我的<div contenteditable="true">
中,用户可以输入单词“ star ”,然后该单词立即被星号代替。
我需要什么:如果用户键入的字母“ star”混合使用大小写字母(例如:staR,Star,STaR ...),则应显示:★
我的第一个想法是使用toLowerCase()
,但是由于转换发生在onInput
上,并且仅在输入整个单词后才转换文本,使用它将无法键入“ STAR”,全部大写。
有什么想法吗?
我愿意接受jQuery
解决方案。
这是我的代码:
// Autofocus the div:
document.getElementById("editableDiv").focus();
// Makes the conversion possible:
String.prototype.allReplace = function(obj) {
var retStr = this;
for (var x in obj) {
retStr = retStr.replace(new RegExp(x,'g'),obj[x]);
}
return retStr;
};
// Converts
function convert() {
var str = document.getElementById("editableDiv").innerHTML;
var white = str.allReplace({
'STAR': '☆','DIAMOND': '◇'
});
var black = white.allReplace({
'star': '★','diamond': '◆'
});
document.getElementById("editableDiv").innerHTML = black;
// Move caret to the end:
var contentEditableElement = document.getElementById("editableDiv");
var range,selection;
if (document.createrange) {
range = document.createrange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
} else if (document.selection) {
range = document.body.createTextRange();
range.movetoElementText(contentEditableElement);
range.collapse(false);
range.select();
}
}
body {
padding: 10px;
font-family: sans-serif;
}
div {
padding: 5px 20px;
width: 200px;
border: solid 1px #000;
outline: 0;
line-height: 2;
font-size: 1.5em;
}
<div id="editableDiv" contenteditable spellcheck="false" oninput="convert();"></div>
解决方法
首先,我建议使用现有的replaceAll。
第二个您正在使用regexp!不用担心,它并不是那么复杂(出于您的目的) 我建议您分两个步骤进行操作:
1-将所有“ STAR”替换为☆
2-然后用★
替换“ 不用照顾案件”“星”“ 无需考虑大小写”意味着仅在正则表达式中使用标志i
;
function replaceMyStuff(str) {
var r = str.replaceAll('STAR','☆')
.replaceAll(/star/gi,'★')
.replaceAll('DIAMOND','<>')
.replaceAll('stuff','replacedStuff');
return r;
}
console.log(replaceMyStuff('star STAR StAr STAR STAr stuff'));
如果您更喜欢它,可以写:
new RegExp('star','gi')
它与/star/gi
然后,您可以使用它替换所有想要的内容:
var str = document.getElementById("editableDiv").innerHTML;
var replacedString = replaceMyStuff(str);
,
您可以使用严格相等比较(===
)运算符对目标字符串进行检查,如下所示:
if (string.toLowerCase() === 'star') {
if (string === 'STAR') {
output = '☆';
}
else {
output = '★';
}
}
工作示例:
const paragraphs = [...document.getElementsByTagName('p')];
const convertParagraph = (paragraph) => {
let paragraphArray = paragraph.textContent.split(' ');
for (let i = 0; i < paragraphArray.length; i++) {
if (paragraphArray[i].toLowerCase() === 'star') {
if (paragraphArray[i] === 'STAR') {
paragraphArray[i] = '☆';
}
else {
paragraphArray[i] = '★';
}
}
}
paragraph.textContent = paragraphArray.join(' ');
}
paragraphs.forEach(paragraph => convertParagraph(paragraph));
<div>
<p>STAR This is a test.</p>
<p>star This is another test.</p>
<p>sTAr This is a third test.</p>
</div>