Smanyx
asked on
Dynamically highly text on a webpage
Hi There,
I am wondering how I could highlight direct quotes from general text on a webpage. I want to be able to distinguish what is being quoted directly from other writings. I might have a way to dynamically detect the quoted bit (and say ... store it in a variable) and want to highlight it from the rest of the text.
To illustrate, let's consider: e.g. quoted_text = "In some urban classrooms, children arrive without any notion of sharing
behavior. If they have gro wn up as s treet surv ivors, wit hout stron g early
mediation for sharing, the y may come to school ready to do battle to the death”
(Rodriguez and Bellanca 13 5).
rest_of_the_text = "On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. “In some urban classrooms, children arrive without any notion of sharing behavior. If they have grown up as street survivors, without strong early mediation for sharing, they may come to school ready to do battle to the death” (Rodriguez and Bellanca 135). You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly."
The question is how can I dynamically highlight the directly quoted speech using JavaScript + CSS?
Thanks in advance.
I am wondering how I could highlight direct quotes from general text on a webpage. I want to be able to distinguish what is being quoted directly from other writings. I might have a way to dynamically detect the quoted bit (and say ... store it in a variable) and want to highlight it from the rest of the text.
To illustrate, let's consider: e.g. quoted_text = "In some urban classrooms,
behavior. If they have gro
mediation for sharing, the
(Rodriguez and Bellanca 13
rest_of_the_text = "On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. “In some urban classrooms, children arrive without any notion of sharing behavior. If they have grown up as street survivors, without strong early mediation for sharing, they may come to school ready to do battle to the death” (Rodriguez and Bellanca 135). You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly."
The question is how can I dynamically highlight the directly quoted speech using JavaScript + CSS?
Thanks in advance.
Can you provide your page HTML to see the content structure.
As noted, you can use the <blockquote> tag and modify your CSS to do whatever you like with it.
You could also create a new CSS class and use that, if your quotes are inline with other text:
You could also create a new CSS class and use that, if your quotes are inline with other text:
<p>And then he said <span class="myquote">"That just might work!"</span>, so we went along with it.</p>
ASKER
Hi all,
Thanks for the replies. I think I haven't presented the problem properly. Using the direct quote is actually a very bad example, a bad analogy, I didn't realize that.
In fact, what I have is a list of publications, and for each publication I use an algorithm that gives a summary of that particular publication.
What I really want is: when the user chooses to read the full text, I want to highlight the summary within the full text on the page...
Hope it's more clear now. Sorry ...
Thanks for the replies. I think I haven't presented the problem properly. Using the direct quote is actually a very bad example, a bad analogy, I didn't realize that.
In fact, what I have is a list of publications, and for each publication I use an algorithm that gives a summary of that particular publication.
What I really want is: when the user chooses to read the full text, I want to highlight the summary within the full text on the page...
Hope it's more clear now. Sorry ...
I think then it depends on the algorithm that produces the summary. Whatever criteria you use in the algorithm to determine what is summary text and what is expanded text can be used to set some kind of flag that can in turn be used to style the two kinds of text differently. "some kind of flag" could be as @paulmacd suggested, to wrap the summary text in span tags with a class.
var the_text = "On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. <span class="myquote">"In some urban classrooms, children arrive without any notion of sharing behavior. If they have grown up as street survivors, without strong early mediation for sharing, they may come to school ready to do battle to the death” (Rodriguez and Bellanca 135).</span> You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly."
String processing is hard in any language. There are always many edge and corner cases that must be accounted for and normalized, otherwise you may wind up with something like this. If you're open to a PHP solution, here is one way to make it work.
<?php // demo/temp_smanyx.php
/**
* https://www.experts-exchange.com/questions/28947809/Dynamically-highly-text-on-a-webpage.html
*
* Getting started in PHP:
* https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html
*/
error_reporting(E_ALL);
// WHAT WE ARE LOOKING FOR, AND WHERE WE ARE LOOKING
$signal_string = '"In some urban classrooms, children arrive without any notion of sharing behavior. If they have grown up as street survivors, without strong early mediation for sharing, they may come to school ready to do battle to the death" (Rodriguez and Bellanca 135).';
$rest_of_the_text = 'On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look. "In some urban classrooms, children arrive without any notion of sharing behavior. If they have grown up as street survivors, without strong early mediation for sharing, they may come to school ready to do battle to the death" (Rodriguez and Bellanca 135). You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.';
// SHOW THE TEST DATA
echo PHP_EOL . "SIGNAL STRING:<br>";
echo PHP_EOL . $signal_string;
echo PHP_EOL . '<br>';
echo PHP_EOL . "REST OF THE TEXT:<br>";
echo PHP_EOL . $rest_of_the_text;
echo PHP_EOL . '<br>';
// PROCESS THE TEXT TO HIGHLIGHT THE SINGAL STRING
$arr = explode($signal_string, $rest_of_the_text);
$glu = '<b>' . $signal_string . '</b>';
$new = implode($glu, $arr);
echo PHP_EOL . "AFTER PROCESSING:<br>";
echo PHP_EOL . $new;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I am using python for processing server side. The AI algorithm works out the summary from the publication. The entire text of the document can be stored in a variable. The returned summary also is stored in a variable.
So, I might have two variables: text and summary for example.
Knowing the length of summary, I can dynamically do something like:
So, I might have two variables: text and summary for example.
text.find(summary)
should give me the beginning of the summary within the text (its index).Knowing the length of summary, I can dynamically do something like:
beginning = text.find(summary)
end = beginning + len(summary)
highlight = text[beginning:end]
I can then try to use this variable, highlight, in tweeking the text extraction as suggested by Slick812 but that assumes the summary is a contiguous extract in the text. What if the summary is composed of non contiguous sentences?
OK, If the summary, is segmented (non contiguous sentences), then you will either have to separate (parse) the data available (summary) into the needed segments, , OR go backwards in the code progression, to where the "non contiguous sentences" of summary are available , before they are combined into the single, summary output text.
Separation of the finished summary text, may be difficult or not possible, but there may be added formatting "separators" like -
" . . . "
or
<p>
or
<br /><br />
that may allow it to reverse progression, back to the parts and pieces.
Separation of the finished summary text, may be difficult or not possible, but there may be added formatting "separators" like -
" . . . "
or
<p>
or
<br /><br />
that may allow it to reverse progression, back to the parts and pieces.
Example: https://jsfiddle.net/gc1cjxd1/1/