How to change color of a search word in HTML?
So in my HTML file, I have
<p class = "result"> {{searchResult}} </p>
where {{searchResult}} is essentially my result.
So if I searched for the term "hot",
{{searchResult}} would contain a string containing the word "hot" in a document.
For example:
"This is hot"
Everything shows up in the webpage perfectly fine but I want to change the color of the search term within the string.
I tried modifying the part where it should output the content in my JS file:
content: result.replace(searchTerm, <span class= "search">searchTerm</span>)
where the class "search" is just changing the color of the word.
But it shows up as the webpage as:
This is <span class = "search">hot</span>
How would I make it so that it changes the color only of the search term?
javascript html
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
add a comment |
So in my HTML file, I have
<p class = "result"> {{searchResult}} </p>
where {{searchResult}} is essentially my result.
So if I searched for the term "hot",
{{searchResult}} would contain a string containing the word "hot" in a document.
For example:
"This is hot"
Everything shows up in the webpage perfectly fine but I want to change the color of the search term within the string.
I tried modifying the part where it should output the content in my JS file:
content: result.replace(searchTerm, <span class= "search">searchTerm</span>)
where the class "search" is just changing the color of the word.
But it shows up as the webpage as:
This is <span class = "search">hot</span>
How would I make it so that it changes the color only of the search term?
javascript html
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
can you add the javascript which adds thecontentto the page?
– Nick Parsons
Nov 24 '18 at 2:15
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21
add a comment |
So in my HTML file, I have
<p class = "result"> {{searchResult}} </p>
where {{searchResult}} is essentially my result.
So if I searched for the term "hot",
{{searchResult}} would contain a string containing the word "hot" in a document.
For example:
"This is hot"
Everything shows up in the webpage perfectly fine but I want to change the color of the search term within the string.
I tried modifying the part where it should output the content in my JS file:
content: result.replace(searchTerm, <span class= "search">searchTerm</span>)
where the class "search" is just changing the color of the word.
But it shows up as the webpage as:
This is <span class = "search">hot</span>
How would I make it so that it changes the color only of the search term?
javascript html
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
So in my HTML file, I have
<p class = "result"> {{searchResult}} </p>
where {{searchResult}} is essentially my result.
So if I searched for the term "hot",
{{searchResult}} would contain a string containing the word "hot" in a document.
For example:
"This is hot"
Everything shows up in the webpage perfectly fine but I want to change the color of the search term within the string.
I tried modifying the part where it should output the content in my JS file:
content: result.replace(searchTerm, <span class= "search">searchTerm</span>)
where the class "search" is just changing the color of the word.
But it shows up as the webpage as:
This is <span class = "search">hot</span>
How would I make it so that it changes the color only of the search term?
javascript html
javascript html
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
edited Nov 24 '18 at 2:22
user3277192
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
asked Nov 24 '18 at 2:03
studentofcsstudentofcs
32
32
can you add the javascript which adds thecontentto the page?
– Nick Parsons
Nov 24 '18 at 2:15
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21
add a comment |
can you add the javascript which adds thecontentto the page?
– Nick Parsons
Nov 24 '18 at 2:15
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21
can you add the javascript which adds the
content to the page?– Nick Parsons
Nov 24 '18 at 2:15
can you add the javascript which adds the
content to the page?– Nick Parsons
Nov 24 '18 at 2:15
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21
add a comment |
1 Answer
1
active
oldest
votes
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
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%2f53454584%2fhow-to-change-color-of-a-search-word-in-html%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
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
add a comment |
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
add a comment |
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
answered Nov 24 '18 at 2:48
willBeingwillBeing
436
436
add a comment |
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%2f53454584%2fhow-to-change-color-of-a-search-word-in-html%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
can you add the javascript which adds the
contentto the page?– Nick Parsons
Nov 24 '18 at 2:15
replace() replaces strings, as text. You need to trigger it to parse the result of that replacement as html so the DOM gets updated. Or you can insert the elements in the DOM yourself.
– user3277192
Nov 24 '18 at 2:21