如何使 JavaScript 的 replaceAll() 将小写和大写的字符串视为小写？

Question

在我的<div contenteditable="true">中，用户可以键入单词">star"；这个词会立即被一个星形符号取代。

如果用户键入"；星形；在所有小写字母中，将显示：★

如果用户键入所有大写字母，则会显示：☆

我需要的是：如果用户键入单词"；星形；如果混合使用小写字母和大写字母(例如：staR、staR、staR…(，则应显示：★

我的第一个想法是使用toLowerCase()，但由于转换发生在onInput，并且它只在键入整个单词后才转换文本，因此使用它将无法键入"；STAR"；，全部大写。

有什么想法吗？

我对jQuery解决方案持开放态度。

这是我的代码：

JSFiddle

// 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>

Answer 1

首先，我建议使用现有的replaceAll。

第二，您正在使用regexp！别担心(为了你的目的(没那么复杂我建议你分两步来做：

1-将所有"STAR"替换为☆

2-然后替换">而不考虑情况"'星★

并且">而不考虑情况"；表示仅使用regexp中的标志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);

Answer 2

您可以使用严格相等比较(===(运算符对目标字符串运行检查，如下所示：

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>