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

Question

In my <div contenteditable="true"> , the user can type the word " star " and the word gets immediately replaced by a star symbol.

If the user types "star" in all lower case letters, this will be displayed: ★

If the user types it with all upper case letters, this will be displayed: ☆

What I need: If the user types the word "star" with a mixture of lower and upper case letters (examples: staR, Star, STaR...), this should be displayed: ★

My first thought was using toLowerCase() , but since the conversion happens onInput , and it only converts the text once the whole word is typed, using it will make it impossible to type "STAR", all upper case.

Any ideas?

I am open to jQuery solutions.

Here is my code:

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

First I would recommand to use the existant replaceAll .

Second you ARE using regexp ! Don't worry it's not that complicated ( for your purpose ) I suggest you to do so in 2 steps :

1 - Replace all 'STAR' with ☆

2 - Then replace " without taking care of the case " 'star' with ★

And " without taking care of the case " means just to use the flag i in the regexp ;)

 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'));

If your are more confortable with it you can write :

 new RegExp('star', 'gi')

It's basically the same as /star/gi

Then you can use it to replace all that you want :

 var str = document.getElementById("editableDiv").innerHTML;
 var replacedString = replaceMyStuff(str);

Answer 2

You can run checks against a target string using the strict equality comparison ( === ) operator, like this:

if (string.toLowerCase() === 'star') {

  if (string === 'STAR') {
    output = '☆';
  }

  else {
    output = '★';
  }
}

---

Working Example:

 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>