So, I have this text:
Lorem ipsum dolor sit amet, wrong text: consectetur adipiscing
elit. Donec quis libero erat. Integer auctor congue odio, end of
wrong text eget condimentum dui. Nam consectetur ut odio vitae
egestas. Ut tincidunt mi lectus, a lobortis ante malesuada ac. Etiam
tristique nunc finibus, wrong text: tincidunt lectus ac, sagittis urna.
Vestibulum end of wrong text
quis maximus libero, eu viverra urna. Morbi a tempor ex.
I would like to remove the phrases in bold and its content with JS and Regex if possible.
EDIT: Maybe I haven't made myself clear, I am asking to remove all the text between "wrong text: " and "end of wrong text" and both of the other words so the text would become like:
Lorem ipsum dolor sit amet, eget condimentum dui. Nam consectetur ut odio vitae
egestas. Ut tincidunt mi lectus, a lobortis ante malesuada ac. Etiam
tristique nunc finibus,
quis maximus libero, eu viverra urna. Morbi a tempor ex.
Try this:
string.replace(/wrong text:.*?end of wrong text/g, '')
Related
I have some data in my vue component that looks like this,
items: [
{
slug: 'this-is-title-1',
title: 'This is title 1',
content:
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et diam quis sem mollis viverra quis sed arcu. Nulla id nulla mollis tortor eleifend aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse quam ipsum, egestas sed lacus a, egestas pretium lorem. Nam non metus quis nulla porta porttitor. Etiam fringilla lorem sed sem dapibus cursus. Maecenas commodo lorem lorem, eu mollis urna aliquam vitae. Vestibulum sit amet ligula a risus dignissim elementum. Nunc volutpat turpis diam, eu lacinia sapien commodo in. Nulla euismod lorem non sapien pharetra consequat. Sed cursus vehicula molestie. Ut a tristique est.</p>'
},
{
slug: 'this-is-title-2',
title: 'This is title 2',
content:
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et diam quis sem mollis viverra quis sed arcu. Nulla id nulla mollis tortor eleifend aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse quam ipsum, egestas sed lacus a, egestas pretium lorem. Nam non metus quis nulla porta porttitor. Etiam fringilla lorem sed sem dapibus cursus. Maecenas commodo lorem lorem, eu mollis urna aliquam vitae. Vestibulum sit amet ligula a risus dignissim elementum. Nunc volutpat turpis diam, eu lacinia sapien commodo in. Nulla euismod lorem non sapien pharetra consequat. Sed cursus vehicula molestie. Ut a tristique est.</p>'
},
],
I am looping over the data in inserting the content attribute into a slot, like so,
<template #content>
{{ item.content }}
</template>
This is getting rendered out as just a string not has HTML is there something I can do to make my slot parse HTML? I assumed I wouldn't no have to use v-html which I would still prefer not to do due to the content coming from a CMS and xss risks.
i have a unique case here. So i have 2 divs, one on the left and one on right. How can i make it so that if the height of left div exceeds the height of the div on right, the function should make the heights equal and hide any text for the left div. So if i calculate the offsetheight on load and for one on right is 443 px and one on left is 583 px, it should make both heights equal and height the rest 140px of data of left one.
I created a pen
var text = document.getElementById('overflow_text')
function mounted() {
var toggleBtn = document.getElementById('toggle_text')
var offsetDiv = document.getElementById('offset_height')
var offsetDivHeight = offsetDiv.offsetHeight + 'px'
var textHeight = text.offsetHeight + 'px'
console.log(textHeight)
console.log(offsetDivHeight)
if (textHeight > offsetHeight) {
text.style.maxHeight = offsetDivHeight
text.style.overflow = 'hidden'
text.style.textOverflow = 'ellipsis'
text.style.whiteSpace = 'nowrap'
}
}
#toggle_text {
cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<body onLoad='mounted()'>
<div class="container">
<div class="row">
<div class="col-md-6">
<p id='overflow_text' class="readMore">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec</p>
<span onClick="myFunction()" id="toggle_text">Read More</span>
</div>
<div class="col-md-6">
<p id="offset_height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae
scelerisque enim ligula venenatis dolor. Maecenas nisl estDonec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est </p>
</div>
</div>
</div>
</body>
So if you check the console, you will see what the heights of both divs are onLoad. Not sure how i can set the CSS through Javascript. Thank you in advance.
If any one has any other ideas on how to achieve this, i am open to suggestions.
The solution is a bit tricky, since you cannot simply use textOverflow: ellipsis css property if your text has multiple lines.
First we set height of the left text container to the height of the right which is smaller. Then we have to shrink the number of words displayed inside the left container. We remove words from the end of the container until container's scrollHeight is smaller or equal to the container's height.
In this way we know that the container has only as much words as it's able to display with restriction that it's no taller than the right container.
The drawback is that we remove overflowing words from the element so you're no longer able to get original content from this container.
function mounted() {
var leftContainer = document.getElementById('overflow_text')
var rightContainer = document.getElementById('offset_height')
var rightOffsetHeight = rightContainer.offsetHeight;
var leftOffsetHeight = leftContainer.offsetHeight;
if (leftOffsetHeight > rightOffsetHeight) {
leftContainer.style.height = rightOffsetHeight + "px"
var wordArray = leftContainer.innerHTML.split(' ');
while(leftContainer.scrollHeight > leftContainer.offsetHeight) {
wordArray.pop();
leftContainer.innerHTML = wordArray.join(' ') + '...';
}
}
}
Your if statement needs to use the variable name, offsetDivHeight.
if (textHeight > offsetHeight)
offsetHeight is never defined. Do you mean offsetDivHeight?
text.style.whiteSpace = 'nowrap'
If you do this, all of the text in the div will be confined to one line.
Demo with these changes made.
Ive got a js that runs to see if a maximum amount of characters is reached. Its got text along with href, but when the max amount of characters is reached, the link doesnt work and converts it to just text. When the limit of less then 580 characters, link works. When it does reach the limit, the read more link does work. Any advice or help please and thanks
$(document).ready(function () {
var stylistText = $('#stylistText');
var stylistText2 = document.getElementById("stylistText").innerHTML;
var countActualText = stylistText2.valueOf().length;
var maxLength = 580;
var aElement = document.createElement('a');
var linkText = document.createTextNode(" ...Read more");
aElement.appendChild(linkText);
aElement.href = "#";
if (countActualText > maxLength) {
stylistText.text(stylistText.text().substring(0, 580));
stylistText.append(aElement);
}
});
here is the html
<div class="stylistInfo">
<img id="stylistPhoto" src="images/Test.jpg" alt="peekaboo beans stylist" />
<p id="stylistText">
This is supposed to be a link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mauris odio. Sed varius, felis eget rutrum scelerisque, enim ligula porta nulla, id rhoncus orci nisi at nunc. Fusce cursus, libero a sagittis viverra, arcu eros luctus arcu, sit amet euismod sapien purus quis nisl. Praesent aliquam aliquam ante ornare pulvinar. Mauris ultrices dictum quam, at ornare dui blandit id. Sed erat elit, fringilla quis diam at, euismod rhoncus massa. Curabitur at arcu nisl. Nullam tincidunt lacus sapien, sed porttitor odio sodales sit amet. Nunc tincidunt nisi et nulla aliquam cras amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec mauris odio. Sed varius, felis eget rutrum scelerisque, enim ligula porta nulla, id rhoncus orci nisi at nunc. Fusce cursus, libero a sagittis viverra, arcu eros luctus arcu, sit amet euismod sapien purus quis nisl. Praesent aliquam aliquam ante ornare pulvinar. Mauris ultrices dictum quam, at ornare dui blandit id. Sed erat elit, fringilla quis diam at, euismod rhoncus massa. Curabitur at arcu nisl. Nullam tincidunt lacus sapien, sed porttitor odio sodales sit amet. Nunc tincidunt nisi et nulla aliquam cras amet.
</p>
</div>
Change stylistText.text(stylistText.text().substring(0, 580));
to stylistText.html(stylistText.html().substring(0, 580));
However, truncating a block of text that contains HTML may cause other problems, especially if the truncation occurs in the middle of an element. I would recommend rethinking your whole strategy on this.
I'm curious if there's a library for python OR javascript to tokenize sentences of a string of sentences and put new line at each sentence?
IE:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet leo in urna hendrerit placerat. Donec adipiscing dignissim adipiscing. Duis adipiscing mollis cursus. Etiam fringilla elit nec enim sagittis a auctor nisi gravida. Nunc sollicitudin, leo sit amet consequat pharetra, mi orci vestibulum mi, a suscipit odio tellus tincidunt erat. Suspendisse a consequat turpis. Morbi eget ante leo, a dignissim mi.
to
Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n
Vestibulum aliquet leo in urna hendrerit placerat.\n
Donec adipiscing dignissim adipiscing. \n
Duis adipiscing mollis cursus. Etiam fringilla elit nec enim sagittis a auctor nisi gravida. Nunc sollicitudin, leo sit amet consequat pharetra, mi orci vestibulum mi, a suscipit odio tellus tincidunt erat. \n
Suspendisse a consequat turpis. \n
Morbi eget ante leo, a dignissim mi.
You are looking for a natural language library.
For Python there is Natural Language Toolkit (NLTK). For example you could take a look at the PunktSentenceTokenizer.
The PunktSentenceTokenizer divides a text into a list of sentences, by using an unsupervised algorithm to build a model for abbreviation words, collocations, and words that start sentences. It must be trained on a large collection of plaintext in the taret language before it can be used. The algorithm for this tokenizer is described in Kiss & Strunk (2006):
Kiss, Tibor and Strunk, Jan (2006): Unsupervised Multilingual Sentence
Boundary Detection. Computational Linguistics 32: 485-525.
The NLTK data package includes a pre-trained Punkt tokenizer for English.
In Python, use str.replace():
>>> s = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet leo in urna hendrerit placerat. Donec adipiscing dignissim adipiscing. Duis adipiscing mollis cursus. Etiam fringilla elit nec enim sagittis a auctor nisi gravida. Nunc sollicitudin, leo sit amet consequat pharetra, mi orci vestibulum mi, a suscipit odio tellus tincidunt erat. Suspendisse a consequat turpis. Morbi eget ante leo, a dignissim mi."
>>> print s.replace('. ', '.\n')
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum aliquet leo in urna hendrerit placerat.
Donec adipiscing dignissim adipiscing.
Duis adipiscing mollis cursus.
Etiam fringilla elit nec enim sagittis a auctor nisi gravida.
Nunc sollicitudin, leo sit amet consequat pharetra, mi orci vestibulum mi, a suscipit odio tellus tincidunt erat.
Suspendisse a consequat turpis.
Morbi eget ante leo, a dignissim mi.
Also, you make be interested in the textwrap module.
If you're just looking for javascript that would do that, you could do this:
var str = "Lorem ipsum 4.00 dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet leo in urna hendrerit placerat. Donec adipiscing dignissim adipiscing. Duis adipiscing mollis cursus. Etiam fringilla elit nec enim sagittis a auctor nisi gravida. Nunc etc.... sollicitudin, leo sit amet consequat pharetra, mi orci vestibulum mi, a suscipit odio tellus tincidunt erat. Suspendisse a consequat turpis. Morbi eget ante leo, a dignissim mi."
str = str.replace(/(\S\.)\s*([A-Z])/g, "$1\n$2");
You can see it work here: http://jsfiddle.net/jfriend00/NR5Nc/.
This particular algorithm only adds a newline if it's a non white space followed by a period followed by whitespace followed by a capital letter. So, it's safe from things like $4.00 and etc... which don't actually end lines. It's also flexible on the amount of whitespace between lines.
Suppose we have the following code:
<div id="test" style="width:200px; height: 200px; overflow: hidden;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Consectetur adipiscing elit. Vivamus lorem ipsum dolor sit amet,
ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
<p>Sed rhoncus facilisis commodo. Sed mattis lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus ipsum diam, cursus ornare eleifend
quis, posuere id sapien. Vestibulum et mattis augue. Nulla facilisi.
commodo lorem, quis varius est facilisis eget. Integer at nunc metus.
Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
</div>
The result would be a clipped text.
Is there some way to get invisible text as a substring?
I tried
$("#test :hidden").text();
and
$('#test').children(":hidden").text()
without success.
I'm trying to show pages of text without scrolling. I have a large amount of text (html formatted) and a fixed size div (the text page). I would like to paginate the text on it, just showing one page of text each time.
There is a good answer on this topic already, it provides the javascript you'd need to do this. Like the respondent there though, I would say find another way to do this if you can.
You could use a mono-spaced font like Lucida Console or Courier New and split the string based on a static number of characters that fit in the content area.