Highlighting text content using the content from an another div
1
I want to highlight the text content in paragraph using text content from an another div. So there is the "increase overall code" in the the first div. I want that these words from the main paragraph to be highlighted by using the first div. Thank you for the possibility to ask for help here!
function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>javascript html css
asked Nov 12 '18 at 18:11
iDrax
123
add a comment |
1
I want to highlight the text content in paragraph using text content from an another div. So there is the "increase overall code" in the the first div. I want that these words from the main paragraph to be highlighted by using the first div. Thank you for the possibility to ask for help here!
function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>javascript html css
asked Nov 12 '18 at 18:11
iDrax
123
add a comment |
1
1
1
I want to highlight the text content in paragraph using text content from an another div. So there is the "increase overall code" in the the first div. I want that these words from the main paragraph to be highlighted by using the first div. Thank you for the possibility to ask for help here!
function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>javascript html css
asked Nov 12 '18 at 18:11
iDrax
123
I want to highlight the text content in paragraph using text content from an another div. So there is the "increase overall code" in the the first div. I want that these words from the main paragraph to be highlighted by using the first div. Thank you for the possibility to ask for help here!
function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>function highlight()
var htext = document.getElementById("torles");
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
innerHTML.innerHTML = innerHTML;
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder
</div>
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>javascript html css
javascript html css
asked Nov 12 '18 at 18:11
iDrax
123
asked Nov 12 '18 at 18:11
iDrax
123
asked Nov 12 '18 at 18:11
iDrax
123
asked Nov 12 '18 at 18:11
iDrax
123
asked Nov 12 '18 at 18:11
iDrax
123
123
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
So, there were a couple things; but first, here's a working example.
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
answered Nov 12 '18 at 18:29
vrugtehagel
354213
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
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
);
);
draft saved
draft discarded
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%2f53267822%2fhighlighting-text-content-using-the-content-from-an-another-div%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
1
So, there were a couple things; but first, here's a working example.
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
answered Nov 12 '18 at 18:29
vrugtehagel
354213
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
add a comment |
1
So, there were a couple things; but first, here's a working example.
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
answered Nov 12 '18 at 18:29
vrugtehagel
354213
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
add a comment |
1
1
1
So, there were a couple things; but first, here's a working example.
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
answered Nov 12 '18 at 18:29
vrugtehagel
354213
So, there were a couple things; but first, here's a working example.
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>Anyway, there were three main things (and a typo). Firstly, you had a line break in your HTML after increase overall coder, and so it would try to find that string with the line break in the text, so it would just not find it.
Second, you mixed up what your variables actually mean; to start off, the text variable (which you misspelled as htext) was a node, not a string. Also, you tried to set the innerHTML of innerHTML, but your variable innerHTML was just a string. You want to set the innerHTML of the node (inputText in this case).
function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>function highlight()
var text = document.getElementById("torles").textContent;//you want the text not the node
var inputText = document.getElementById("inputText");
var innerHTML = inputText.innerHTML;
var index = innerHTML.indexOf(text);
if (index >= 0)
innerHTML = innerHTML.substring(0, index) + "<span class='highlight'>" + innerHTML.substring(index, index + text.length) + "</span>" + innerHTML.substring(index + text.length);
inputText.innerHTML = innerHTML;//this line was incorrect
.highlight
background-color: red;
<html>
<body>
<div class="col-md-10 bordered selectborder fragment" id="torles">increase overall coder</div><!-- make sure there's no line break after "coder"-->
<button onclick="highlight()">Highlight</button>
<div class="col-md-10 para bordered" id="inputText">
<strong><p>Significantly Reduce Costs and Improve Quality with an Experienced, Professional Global Coding Solution. Health Information Management (HIM) Directors and CFOs are seeking innovative ways to reduce expenses, maintain DNFB goals, and increase overall coder quality.</p></strong>
</div>
</body>
</html>answered Nov 12 '18 at 18:29
vrugtehagel
354213
answered Nov 12 '18 at 18:29
vrugtehagel
354213
answered Nov 12 '18 at 18:29
vrugtehagel
354213
answered Nov 12 '18 at 18:29
vrugtehagel
354213
354213
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
add a comment |
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
And can I improve it to use multiple times, on the same paragraph, but with another couple of words from an input in the same time? I mean: ex. If I want to highlight the word "are", "and" separately from other two divs.
– iDrax
Nov 12 '18 at 19:02
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
Yes you could, but I suppose it's better to try and figure that out yourself for a bit, and if you get stuck again, post it as a new question rather than changing this one
– vrugtehagel
Nov 12 '18 at 19:18
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53267822%2fhighlighting-text-content-using-the-content-from-an-another-div%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
