I am trying to make function that tells me how many there are words that contains less than 3 letters.
For example, "Tomorrow will be rain. So bring your umbrellas"
in this sentence, only "be" and "so" so equal two. Any help would be appreciated.
function (stri){
return ("less than 3 ").length;
}
( I am aiming to use \w (regular expression) if its possible.)
If you use lodash you can do the following...
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script>
// create a function to call with your string and the min size of the word
function countSmalls(s,min) {
// split by non word characters
return _.where(s.split(/\W/),function(v,i,l){
// return true or false to satisfy the callback, all *truthy* values are added to the return value of _.where
return v && v.length < min;
}).length;
}
// create some text
var lorem = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
// call your function
countSmalls(lorem,3); // 24 (words that are < 3 characters)
</script>
function countSmallWords(stringToTest){
var smallWords = /\b\w{1,2}\b/g;
return stringToTest.match(smallWords).length;
}
Explanation: It uses the regular expression \b\w{1,2}\b with the global flag to match all words in a string that are one or two characters. Then it uses the match function on that string to give an array of the words. Finally, get the length property for the count.
Example usage:
//Example 1:
alert(countSmallWords("Tomorrow will be rain. So bring your umbrellas"));
//alerts 2
//Example 2:
var smallWordCount = countSmallWords("Hello. What a nice day it is.");
//smallWordCount == 3
//Example 3:
var smallWordCount = countSmallWords("Are there any small words in this sentence?");
console.log(smallWordCount);
//Press F12 and you will see 1 in the browser console.
Related
This question already has answers here:
Li item on two lines. Second line has no margin
(8 answers)
How to keep indent for second line in ordered lists via CSS?
(14 answers)
Get second line of bullet item to indent as first part - not underneath the bullet?
(2 answers)
Closed 1 year ago.
p::before {
content: "1. ";
}
p {
width: 200px;
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
How can I let the line breaks begin more on the right, so that the pseudo element doesnt have any text under it?
Flexbox can fix that.
p::before {
content: "1. ";
}
p {
width: 200px;
display: flex;
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Alternatively, use CSS-Tables
p::before {
content: "1. ";
display: table-cell;
padding:.25em;
}
p {
width: 200px;
display: table-row;
}
span {
color: red
}
<p>This text is pretty long and needs a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <span>INTERCEDING SPAN</span> consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
Set display: flex or display: inline-flex on your p element.
However, I would suggest using standard ul li for such purpose instead of pseudo elements.
I try to capture some patterns in my textInput (a string) by using the following RegEx:
let idPatterns = /\[id="(.*?)\"]|\[id="(.*?)"]|\[id="(.*?)"]/gim;
The part that matters to me, is the "id" included as: (.*?)
To extract the ids, I use the following:
patternsArray = [...textInput.matchAll(idPatterns)];
My result for the following text is:
text [id="B0076VLVXG"] text
Array:
0: "undefined"
but when I reduce the idPatterns variable to
let idPatterns = /\[asin="(.*?)"]/gim;
I get "B0076VLVXG" as result (as desired). So in conclusion, the concatenation of my idPatterns seems to be inaccurate, but works using each of them separately. How can I combine the three groups of patterns in my RegEx correctly? Thank you for your help.
function getIdsCombinedRegEx(textInput) {
const idPatterns = /\[id="(.*?)\"]|\[id="(.*?)"]|\[id="(.*?)"]/gim;
const idPatternsCollection = [...textInput.matchAll(idPatterns)];
return idPatternsCollection;
}
function getIdsSingleRegEx(textInput) {
const idPatterns = /\[id="(.*?)"]/gim;
const idPatternsCollection = [...textInput.matchAll(idPatterns)];
return idPatternsCollection;
}
let textInput = '[id="B07Q45WX5D"] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. [id="B08CQTNK8S"]';
console.log(getIdsCombinedRegEx(textInput));
console.log(getIdsSingleRegEx(textInput));
Your regex should work as is, returning the match in group 2 (as it is captured by the group in the second branch of the alternation:
const idPatterns = /\[id="(.*?)\"]|\[id="(.*?)"]|\[id="(.*?)"]/gim;
const textInput = 'text [id="B0076VLVXG"] text';
const patternsArray = [...textInput.matchAll(idPatterns)];
console.log(patternsArray);
Since each alternation will return the match in a different group, it might be easier to rewrite the regex to a constant capture group. For example:
\[id(?:=|=)("|"|")(.*?)\1]
This looks for:
the characters [id
either = or =
one of ", " or " (captured in group 1)
a minimal number of characters (captured in group 2)
a match to what was captured in group 1 (the quote part)
a closing ]
Regex demo on regex101
For your expanded data:
const textInput = '[id="B07Q45WX5D"] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. [id="B08CQTNK8S"]';
const idPatterns = /\[id(?:=|=)("|"|")(.*?)\1]/gim;
const idPatternsCollection = [...textInput.matchAll(idPatterns)];
// just get group 2
const idValues = idPatternsCollection.map(m => m[2]);
console.log(idValues);
I want to add some functionality on an html element, when I scroll down on that element.
var El = document.getElementbyId("info");
El.addEventListener("scroll", function() {
El.style.background="red";
})
I want to use that event on an element, not on document or window object.
your selector 'getElementbyId' is wrong, the 'b' needs to be a capital
Ive added some content so have a viable demo case
document.getElementById('info').addEventListener(
'scroll',
function()
{
document.getElementById('info').style.background="red";
},
false
)
#info{
height:200px;
width:200px;
background-color:yellow;
overflow:scroll;
}
<div id="info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
My issues:
When scrolling upwards it scrubs at the end
When scrolling downwards, it will stuck at the end
Can anyone help me with this? I'm not good at the javascript, and I have no chance of finding out where the problem is. Scrolling is nice, but these two problems are pretty unpleasant. Try scrolling up and down completely to show my issues.
function Scrollbar(){
new SmoothScroll(document,65,15) // target | speed | smooth
}
function SmoothScroll(target, speed, smooth) {
if (target == document)
target = (document.documentElement || document.body.parentNode || document.body) // cross browser support for document scrolling
var moving = false
var pos = target.scrollTop
target.addEventListener('mousewheel', scrolled, false)
target.addEventListener('DOMMouseScroll', scrolled, false)
function scrolled(e) {
e.preventDefault(); // disable default scrolling
var delta = e.delta || e.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = -e.detail;
}
delta = Math.max(-1, Math.min(1, delta)) // cap the delta to [-1,1] for cross browser consistency
pos += -delta * speed
pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight + 15)) // + value from SMOOTH
if (!moving) update()
}
function update() {
moving = true
var delta = (pos - target.scrollTop) / smooth
target.scrollTop += delta
if (Math.abs(delta) > 0)
requestFrame(update)
else
moving = false
}
var requestFrame = function() { // requestAnimationFrame cross browser
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(func) {
window.setTimeout(func, 1000 / 50);
}
);
}()
}
p {
font-size: 20px;
margin-bottom: 0px;
}
<body onload="Scrollbar()">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>
SOLVED! Code is UPDATED
Add + 15 at the end Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight + 15)) (15 is my smooth value, you set yours from new SmoothScroll(document,65,15)
Replace Math.abs(delta) > 0.5 with Math.abs(delta) > 0
Speed = number + smooth (for speed 50 with smooth 15 write 65 in my example)
lol your question is my solution because im tryin to look for a way to make scrollbar like this site https://www.carbonbeauty.com/, thanks man
So I have this example which is working: http://jsfiddle.net/MYSVL/1064/
But I wan't this to work with html tags also. For example, in the fiddle our text is wrapped in a div.
<div id="fitin">
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
But I want this example to work with html tags as well:
<div id="fitin">
<div><h1>Lorem</h1> <p>ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </p> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
Does anyone know how to make this work?
You should use viewport percentage units that vary the size according to the container's size:
vh
1/100th of the height of the viewport.
vw
1/100th of the width of the viewport.
vmin
1/100th of the minimum value between the height and the width of the viewport.
vmax
1/100th of the maximum value between the height and the width of the viewport.
This way, you don't let javascript handle a visual issue (which is heavy to set onresize events), and you can use in any element.
see: http://jsfiddle.net/MYSVL/1064/