Highlighting text content using the content from an another div

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>

asked Nov 12 '18 at 18:11

iDrax

173

add a comment |

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>

asked Nov 12 '18 at 18:11

iDrax

173

add a comment |

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>

asked Nov 12 '18 at 18:11

iDrax

173

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

asked Nov 12 '18 at 18:11

iDrax

173

asked Nov 12 '18 at 18:11

iDrax

173

asked Nov 12 '18 at 18:11

iDrax

173

asked Nov 12 '18 at 18:11

iDrax

173

asked Nov 12 '18 at 18:11

iDrax

173

add a comment |

1 Answer
1

active

oldest

votes

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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

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 |

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>

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 |

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>

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>

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

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

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nrthugu