时间戳

首页 > 解决方案 > 如何使 JavaScript 的 replaceAll() 将小写和大写的字符串视为小写？

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

问题描述

在 my<div contenteditable="true">中，用户可以键入单词“ star ”，该单词立即被星号替换。

如果用户输入全部小写的“star”，则会显示：★</p>

如果用户全部输入大写字母，则会显示：☆</p>

我需要什么：如果用户输入的单词“star”混合了大小写字母（例如：staR、Star、STaR...），则应显示：★</p>

我的第一个想法是使用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>

标签： javascriptuppercasecase-insensitivelowercasereplaceall

解决方案

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

其次，您正在使用正则表达式！不用担心它并不复杂（出于您的目的）我建议您分两步进行：

1 - 用☆替换所有'STAR'</p>

2 - 然后用★替换“不考虑情况”'star'</p>

并且“不考虑情况”意味着仅在正则表达式中使用标志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);

推荐阅读