How could you insert N number of commas into this string, before a space but not after a period or another comma? Using ruby or javascript.
One option:
>>> var str = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Praesent mauris neque adipiscing nec malesuada id fermentum at eros. Curabitur eu neque nunc, et porta risus.";
>>> str.replace(/([^,.]) /g, '$1, ');
"Lorem, ipsum, dolor, sit, amet, consectetur, adipiscing, elit. Praesent, mauris, neque, adipiscing, nec, malesuada, id, fermentum, at, eros. Curabitur, eu, neque, nunc, et, porta, risus."
Alternatively, you can go another way in order to mimick negative lookbehind:
>>> var str = "Lorem ipsum dolor sit amet consectetur adipiscing elit. Praesent mauris neque adipiscing nec malesuada id fermentum at eros. Curabitur eu neque nunc, et porta risus.";
>>> str.replace(/([,.])? /g, function($0, $1) { return $1 ? $0 : ', '; });
"Lorem, ipsum, dolor, sit, amet, consectetur, adipiscing, elit. Praesent, mauris, neque, adipiscing, nec, malesuada, id, fermentum, at, eros. Curabitur, eu, neque, nunc, et, porta, risus."
Ruby variation of #jensgram's answer:
str.gsub(/([^,.]) /, $1 + ', ')
Related
I'm working on a multi-language project. I want to change all the used margin-left styles to margin-inline-start, after the direction of the <body> changed according to the selected language. how can I do it programmatically in javaScript?
You probably can try to loop through computed style, retrieve margin-left value, reset margin-left and then apply a margin-inline-start with the value of margin left.
here is the basic idea : (Live Demo at https://codepen.io/gc-nomade/pen/MWrGBjX?editors=1111 )
let allelements = document.querySelectorAll("body *");
for (i = 0; i < allelements.length; i++) {
let computedStyle = window.getComputedStyle(allelements[i]);
// look for
if (computedStyle.getPropertyValue("margin-left") != "0px") {
let valMargin = computedStyle.getPropertyValue("margin-left");
// let's see what's going on, if anything happens
console.log(
"found margin-left. value : " +
computedStyle.getPropertyValue("margin-left") +
" of " +
allelements[i].tagName
);
//reset
allelements[i].style.marginLeft = "auto";
// set/reset inline-start margin
allelements[i].style.marginInlineStart = valMargin;
}
}
body {
direction: rtl;
}
h1,
p,
code {
margin-left: 10em;
}
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
I'm not an developper, so that might not be the most effective way to do it.
But starting from here, you will probably find out that margin-right maybe needs to be reset too, and so floats....
If you use a flex or grid-layout, without margin , but justify/align , you will not have to bother about the direction / dir value of the document , the browser will follow it naturally ;)
I learn on how to alert all html code from webpage using this code:
var markup = document.document.innerHTML;
alert(markup);
I want to alert only all <p>
I tried this code
var markup = document.getElementsByTag('p').innerHTML;
alert(markup);`
But it's not working
document.getElementsByTagName("p") returns a HTMLCollection which you can convert to an array using the spread operator. Then you need to get the innerHTML for each element of the array. Finally you can join those innerHTML together to output them:
var pElements = [ ... document.getElementsByTagName("p") ];
var pMarkup = pElements.map( element => element.innerHTML );
alert( pMarkup.join( "\n" ) );
<p>abc<strong>def</strong></p>
<table><tr><td>Don't show this</td></tr></table>
<p>ghi<em>jkl</em></p>
I think you are after HTMLElement.outerHTML
// All p's
const pTags = document.querySelectorAll('p');
const output = [...pTags].map(p => p.outerHTML).join("");
console.log(output);
.red {
color: red;
}
<p class="red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at fermentum turpis. Maecenas congue accumsan enim, et dictum turpis malesuada et.
</p>
<p>
Mauris vitae pretium tortor. Aenean nulla ante, scelerisque in erat ac, tincidunt porttitor dolor. Sed blandit sed mi at vulputate.
</p>
<p id="three">
Curabitur lobortis at augue at hendrerit. Mauris id ligula cursus ligula dictum viverra.
</p>
<p>
Sed suscipit varius orci. Duis sit amet fermentum eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo turpis in neque aliquam, et laoreet odio consequat.
</p>
<p data-number="5">
Nam dolor neque, lacinia sed viverra et, cursus ac ipsum. Cras gravida quam enim, sit amet tristique urna faucibus non.
</p>
<p>
Phasellus cursus, justo a volutpat pulvinar, ligula metus mollis turpis, in tincidunt ante nisl non nunc.
</p>
I have a regex I intend to use with the .replace method with the intention of extracting paragraphs from a string and pushing each one to an array.
I was struggling with my getValues function and when I logged both Match and Group1 to the console got some unexpected results.
Here's the code wip:
var mystring = 'Valid prater\nLorem ipsum dolor sit amet, consectetur adipiscing elit. \nProin volutpat facilisis imperdiet. \n Nunc porttito\nMorbi non eros nec arcu condimentum ultrices in ut nunc. \nMaecenas elit tellus, scelerisque ac auctor fermentum, bibendum. '
var paragraphs = [];
var obj = {};
var getValues = function(match,p1) {
console.log('Match: ' + match );
console.log('p1: ' + p1 );
// obj= {};
// obj['paragraph'] = p1;
// paragraphs.push(obj);
};
mystring.replace(/([^\\n][^\\]+)/g, getValues);
https://jsfiddle.net/7293mo7y/
Expected output:
Match: Valid prater
p1: Valid prater
Match: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
p1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Match: Proin volutpat facilisis imperdiet.
p1: Proin volutpat facilisis imperdiet.
Match: Nunc porttito
p1: Nunc porttito
Match: Morbi non eros nec arcu condimentum ultrices in ut nunc.
p1: Morbi non eros nec arcu condimentum ultrices in ut nunc.
Match: Maecenas elit tellus, scelerisque ac auctor fermentum, bibendum.
p1: Maecenas elit tellus, scelerisque ac auctor fermentum, bibendum.
I'm expecting similar behaviour to this example
Actual output:
Match: Valid prater
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin volutpat facilisis imperdiet.
Nunc porttito
Morbi non eros nec arcu condimentum ultrices in ut nunc.
Maecenas elit tellus, scelerisque ac auctor fermentum, bibendum.
p1: Valid prater
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin volutpat facilisis imperdiet.
Nunc porttito
Morbi non eros nec arcu condimentum ultrices in ut nunc.
Maecenas elit tellus, scelerisque ac auctor fermentum, bibendum.
Could anyone explain why I'm not getting the expected output when logging match and p1 to the console?
Why is the behaviour different to this example?
What needs to change to get the expected output?
Thanks!
You can just take advantage of MULTILINE flag or m in your regex. That allows you to use anchors ^ and $ to match a full line in each match like this:
var mystring = 'Valid prater\nLorem ipsum dolor sit amet, consectetur adipiscing elit. \nProin volutpat facilisis imperdiet. \n Nunc porttito\nMorbi non eros nec arcu condimentum ultrices in ut nunc. \nMaecenas elit tellus, scelerisque ac auctor fermentum, bibendum. '
var paragraphs = [];
var obj = {};
var getValues = function(match,p1) {
console.log('Match: ' + match);
console.log('p1: ' + p1);
};
mystring.replace(/^(.*)$/mg, getValues);
Updated JS Fiddle
I have several bios that all look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</p>
Not the prettiest text blocks, but they're auto-generated by the system. I need to iterate through each <p> and take everything after the first set of break tags and wrap that in something like a <div>.
The end result would be:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.</p>
<div class="theRest">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt auctor purus, ut cursus quam fringilla id. Suspendisse a libero id mauris faucibus convallis at ut lacus.
</div>
</p>
Try this (inspired of #dave answer):
$("p").each(function(){
// Add a div after the second <br /> (in the current <p>)
$("br:eq(1)", this).after('<div class="theRest"> </ div>');
// Split each "child" in an array
$(this).contents().filter(function(index, elem){
// Keep only children after the <div />
return index > 3;
// Remove and put them into the <div />
}).detach().appendTo($(".theRest", this));
});
Fiddle
Try this:
$('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
But it's not a good enough solution.
For prevent your other p element be wrapped, You should find from any parent element like below:
$('.father').find('p').each(function() {
$(this).contents(':gt(2)').wrap('<div class="theRest"></div>');
});
Try this:
$($("p").contents().get(2)).after('<div class="theRest"></div>');
$("p").contents().filter(function(index, element) {
return index > 3;
}).detach().appendTo(".theRest");
Fiddle
Even though the format returned from server is bad from my standards as it complicates things for the given purpose. However, with some tricks there is still a way to do it.
Explanation: select all nodes, discard the first node because that happens to be the text node, then use jquery wrapAll method to take everything after that node and wrap it up in new div.
Demo: http://jsfiddle.net/qe3bm92e/3/
var txt = $('.txt').contents();
txt.splice(0,1);
txt.wrapAll($("<div>").addClass('red'));
You can replace '.txt' with 'p' but it's not a good practice for very obvious reason.
I'm trying to select each first word, to wrap it in a specific span.
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
sagittis nunc non nisi venenatis
auctor. Aliquam consectetur pretium
sapien, eget congue purus egestas nec.
Maecenas sed purus ut turpis varius
dictum. Praesent a nunc ipsum, id
mattis odio. Donec rhoncus posuere
bibendum. Fusce nulla elit, laoreet
non posuere.
If this is the text, the script should select Lorem, Aliquam, varius and nulla.
You can do this, by using JavaScript to wrap every word in the paragraph in its own span, and then walking through the spans finding out what their actual position on the page is, and then applying your style changes to the spans whose Y position is greater than the preceding span. (Best do it beginning-to-end, though, as earlier ones may well affect the wrapping of latter ones.) But it's going to be a lot of work for the browser, and you'll have to repeat it each time the window is resized, so the effect will have to be worth the cost.
Something like this (used jQuery as you've listed the jquery tag on your question):
jQuery(function($) {
var lasty;
var $target = $('#target');
$target.html(
"<span>" +
$target.text().split(/\s/).join("</span> <span>") +
"</span>");
lasty = -1;
$target.find('span').each(function() {
var $this = $(this),
top = $this.position().top;
if (top > lasty) {
$this.css("fontWeight", "bold");
lasty = top;
}
});
});
<div id='target' style='width: 20em'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Naturally that's making a huge set of assumptions (that all whitespace should be replaced with a single space, that there's no markup in the text, probably others). But you get the idea.
Here's a version that handles window resize, 50ms after the last resize event occurs (so we're not doing it interim) and with Gaby's suggestion (below) that we unbold at the start of the resize:
jQuery(function($) {
var resizeTriggerHandle = 0;
// Do it on load
boldFirstWord('#target');
// Do it 100ms after the end of a resize operation,
// because it's *expensive*
$(window).resize(function() {
if (resizeTriggerHandle != 0) {
clearTimeout(resizeTriggerHandle);
}
unboldFirstWord('#target');
resizeTriggerHandle = setTimeout(function() {
resizeTriggerHandle = 0;
boldFirstWord('#target');
}, 50);
});
function boldFirstWord(selector) {
var lasty;
// Break into spans if not already done;
// if already done, remove any previous bold
var $target = $(selector);
if (!$target.data('spanned')) {
$target.html(
"<span>" +
$target.text().split(/\s/).join("</span> <span>") +
"</span>");
$target.data('spanned', true);
}
else {
unboldFirstWord($target);
}
// Apply bold to first span of each new line
lasty = -1;
$target.find('span').each(function() {
var $this = $(this),
top = $this.position().top;
if (top > lasty) {
$this.css("fontWeight", "bold");
lasty = top;
}
});
$target.data('bolded', true);
}
function unboldFirstWord(selector) {
var $target = selector.jquery ? selector : $(selector);
if ($target.data('spanned') && $target.data('bolded')) {
$target.find('span').css("fontWeight", "normal");
$target.data('bolded', false);
}
}
});
<div id='target'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor. Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum. Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Try this:
$(function() {
$('p').each(function() {
var text_splited = $(this).text().split(" ");
$(this).html("<strong>"+text_splited.shift()+"</strong> "+text_splited.join(" "));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis nunc non nisi venenatis auctor.</p>
<p>Aliquam consectetur pretium sapien, eget congue purus egestas nec. Maecenas sed purus ut turpis varius dictum.</p>
<p>Praesent a nunc ipsum, id mattis odio. Donec rhoncus posuere bibendum. Fusce nulla elit, laoreet non posuere.</p>
To bold every first word of a <p> tag, including whitespace after the initial <p>, use some regular expressions:
$('p').each(function(){
var me = $(this);
me.html( me.text().replace(/(^\w+|\s+\w+)/,'<strong>$1</strong>') );
});