Make highlighting function to highlight multiple words from different divs.
0
The code is working correctly, but i want to improve it to use multiple times if i submit a respective word from an input into divs from the main paragraph.
Clearly, i want to submit words from an input textarea into divs. And those inserted words in different divs needs to be highlighted exactly in the main paragraph. I spent many hours with this, but still.. i tried it with for loop, i tried to modify the function, but nothing works.
ex. "Improve", "Reduce", "HIM".
function highlight() {
var text = document.getElementById("torles").textContent;
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;
}
}.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 13 '18 at 15:05
iDraxiDrax
173
add a comment |
0
The code is working correctly, but i want to improve it to use multiple times if i submit a respective word from an input into divs from the main paragraph.
Clearly, i want to submit words from an input textarea into divs. And those inserted words in different divs needs to be highlighted exactly in the main paragraph. I spent many hours with this, but still.. i tried it with for loop, i tried to modify the function, but nothing works.
ex. "Improve", "Reduce", "HIM".
function highlight() {
var text = document.getElementById("torles").textContent;
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;
}
}.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 13 '18 at 15:05
iDraxiDrax
173
add a comment |
0
0
0
The code is working correctly, but i want to improve it to use multiple times if i submit a respective word from an input into divs from the main paragraph.
Clearly, i want to submit words from an input textarea into divs. And those inserted words in different divs needs to be highlighted exactly in the main paragraph. I spent many hours with this, but still.. i tried it with for loop, i tried to modify the function, but nothing works.
ex. "Improve", "Reduce", "HIM".
function highlight() {
var text = document.getElementById("torles").textContent;
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;
}
}.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 13 '18 at 15:05
iDraxiDrax
173
The code is working correctly, but i want to improve it to use multiple times if i submit a respective word from an input into divs from the main paragraph.
Clearly, i want to submit words from an input textarea into divs. And those inserted words in different divs needs to be highlighted exactly in the main paragraph. I spent many hours with this, but still.. i tried it with for loop, i tried to modify the function, but nothing works.
ex. "Improve", "Reduce", "HIM".
function highlight() {
var text = document.getElementById("torles").textContent;
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;
}
}.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 text = document.getElementById("torles").textContent;
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;
}
}.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 text = document.getElementById("torles").textContent;
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;
}
}.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 13 '18 at 15:05
iDraxiDrax
173
asked Nov 13 '18 at 15:05
iDraxiDrax
173
asked Nov 13 '18 at 15:05
iDraxiDrax
173
asked Nov 13 '18 at 15:05
iDraxiDrax
173
asked Nov 13 '18 at 15:05
iDraxiDrax
173
173
add a comment |
add a comment |
0
active
oldest
votes
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%2f53283905%2fmake-highlighting-function-to-highlight-multiple-words-from-different-divs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53283905%2fmake-highlighting-function-to-highlight-multiple-words-from-different-divs%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
