Mixing
Javascript How to find a sub-string in the string and view an image
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;
}
javascript
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
add a comment |
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;
}
javascript
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
matchexpects a regex,. not a string. And also returns an array.
– Keith
Jan 2 at 13:18
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
– Peter Trnava
Jan 2 at 13:43
add a comment |
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;
}
javascript
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
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;
}
javascript
javascript
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
edited Jan 2 at 13:44
Peter Trnava
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
asked Jan 2 at 13:07
Peter TrnavaPeter Trnava
172
172
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
matchexpects a regex,. not a string. And also returns an array.
– Keith
Jan 2 at 13:18
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
– Peter Trnava
Jan 2 at 13:43
add a comment |
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
matchexpects a regex,. not a string. And also returns an array.
– Keith
Jan 2 at 13:18
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
– Peter Trnava
Jan 2 at 13:43
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
match expects a regex,. not a string. And also returns an array.– Keith
Jan 2 at 13:18
match expects a regex,. not a string. And also returns an array.– Keith
Jan 2 at 13:18
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
– Peter Trnava
Jan 2 at 13:43
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
– Peter Trnava
Jan 2 at 13:43
add a comment |
1 Answer
1
active
oldest
votes
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>answered Jan 2 at 14:08
KeithKeith
9,0051821
Thank you very much
– Peter Trnava
Jan 2 at 15:17
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006932%2fjavascript-how-to-find-a-sub-string-in-the-string-and-view-an-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Jan 2 at 14:08
KeithKeith
9,0051821
Thank you very much
– Peter Trnava
Jan 2 at 15:17
add a comment |
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>answered Jan 2 at 14:08
KeithKeith
9,0051821
Thank you very much
– Peter Trnava
Jan 2 at 15:17
add a comment |
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>answered Jan 2 at 14:08
KeithKeith
9,0051821
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>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>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>answered Jan 2 at 14:08
KeithKeith
9,0051821
answered Jan 2 at 14:08
KeithKeith
9,0051821
answered Jan 2 at 14:08
KeithKeith
9,0051821
answered Jan 2 at 14:08
KeithKeith
9,0051821
9,0051821
Thank you very much
– Peter Trnava
Jan 2 at 15:17
add a comment |
Thank you very much
– Peter Trnava
Jan 2 at 15:17
Thank you very much
– Peter Trnava
Jan 2 at 15:17
Thank you very much
– Peter Trnava
Jan 2 at 15:17
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54006932%2fjavascript-how-to-find-a-sub-string-in-the-string-and-view-an-image%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is the str value, my friend?
– Tomato32
Jan 2 at 13:15
matchexpects a regex,. not a string. And also returns an array.– Keith
Jan 2 at 13:18
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
– Peter Trnava
Jan 2 at 13:43