Link to home
Start Free TrialLog in
Avatar of Smanyx
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 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."

The question is how can I dynamically highlight the directly quoted speech using JavaScript + CSS?

Thanks in advance.
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Not sure how javascript or css enter into the equation but you can distinguish quoted text from the rest of a paragraph using the <blockquote> tag. You can also include an href="" attribute to link the quoted text back to its source.

Example: https://jsfiddle.net/gc1cjxd1/1/
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:
<p>And then he said <span class="myquote">"That just might work!"</span>, so we went along with it.</p>
Avatar of Smanyx
Smanyx

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 ...
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."

Open in new window

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;

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Smanyx

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.
text.find(summary)

Open in new window

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]

Open in new window

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.