Javascript如何在字符串中查找子字符串并查看图像

Question

I apologize for the English language. I will try to search the sub-string: Example: Hello world, my name is Peter.

• 1.case - if "Peter" is in the string - Figure 1 is displayed
• 2nd case - if there is a "name" in the string - also picture 2 is displayed

data are entered via html input The options is about 70

I use the following code to view the image.

function change() {
  var text = "";
  var image = "";
  //alert('hi');
  var answers = str.match(document.getElementById("UserInputImage").value);
  //alert(answers);
  switch (answers) {
    case "2":
      text = "Obrázok porovnania";
      image = '<img src="https://qlis.darden.sk/img_por/1_qr.jpg"></img>';
      break;
    case "3":
      text = "NoteB";
      image = '<img src="http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png"></img>';
      break;
    case "C":
      text = "NoteC";
      image = '<img src="http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12"></img>';
      break;

    default:
      text = "Nie je naskenovaný QR kód alebo nie je správny";
  }
  document.getElementById("demo1").innerHTML = text;
  document.getElementById("demo2").innerHTML = image;
}

Answer 1

From what I can gather from your updated question, you want the user to input some text into a string, and it then to show images & some text based on certain strings been in the input.

If so, what you can do is create a simple array with the regEx for each term you require, and then the text & image for this term.

You can then loop and check, build the found terms into an array and simple map those to your desired output.

Example below..

ps. You didn't give a 3rd case, so I've used the term hello for that to trigger.

All you then need to do is update the array with your 70 terms, but that's left for you.. :)

 const terms = [ { re: /peter/i, txt: "Obrázok porovnania", img: 'https://qlis.darden.sk/img_por/1_qr.jpg' }, { re: /name/i, txt: "NoteB", img: "http://fc01.deviantart.net/fs29/f/2009/238/d/8/Small_50x50__png_clock_pic_by_counter_countdown_ip.png" }, { re: /hello/i, txt: "NoteC", img: "http://a.deviantart.net/avatars/r/a/rachelsrandomart.gif?12" } ]; const userInput = document.getElementById("UserInputImage"); function change() { const found = []; for (const term of terms) { if (this.value.match(term.re)) { found.push(term); } } document.getElementById("demo1").innerHTML = found.map(m => `<p>${m.txt}</p>`).join(""); document.getElementById("demo2").innerHTML = found.map(m => `<img src=${m.img}/>`).join(""); } userInput.addEventListener("input", change); 

 <p>Type -> <b>hello my name is peter</b> to see all terms</p> <input id="UserInputImage"> <div id="demo1"></div> <div id="demo2"></div>