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

如何解决如何使JavaScript的replaceAll将小写和大写的字符串都视为小写？

在我的<div contenteditable="true">中，用户可以输入单词“ star ”，然后该单词立即被星号代替。

如果用户在所有小写字母中键入“ star”，则将显示：★

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

我需要什么：如果用户键入的字母“ 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>

解决方法

首先，我建议使用现有的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>