I have string in variable (Javascript/jQuery) containing content like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
Pellentesque aliquet luctus lobortis.
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
massa iaculis leo, nec auctor
how i can wrap all unwrapped content in p tags?
So that string looks like:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
<p>Pellentesque aliquet luctus lobortis.</p>
<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>
<p>massa iaculis leo, nec auctor</p>
Thank you!
Something like
var str = 'your string';
var div = $('<div />', {html: str});
div.contents().filter(function() {
return this.nodeType === 3;
}).wrap('<p />');
var new_str = div.html();
FIDDLE
Using a new jQuery object to parse the string as HTML, and then filtering out unwrapped textnodes, and wrapping them with paragraphs, and outputting the changed HTML as the new string.
Here's a jQuery-free way to do it using only string methods (no DOM required.)
var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>Pellentesque aliquet luctus lobortis.<p>Morbi a faucibus magna. Donec lacinia, leo eget</p>massa iaculis leo, nec auctor",
unwrapped = text.split(/<p>\b[^>]*<\/p>/g), //regex to split on all p wrapped text
i;
for (i=0; i < unwrapped.length; i++) {
text = text.replace(unwrapped[i], '<p>' + unwrapped[i] + '</p>');
};
Related
I have a string like:
const content = 'Lorem ipsum dolor {image} sit amet, consectetur adipiscing elit {image}. Sed quis varius erat. Pellentesque in {image} magna feugiat mi imperdiet suscipit. Pellentesque eget lobortis justo. {image} Sed id pretium purus.'
And an array like:
const images = ['https://images.website.com/61ea8cc09233173e0ff27b1b.jpg','https://images.website.com/61ea8cc39233173e0ff27b24.jpg','https://images.website.com/61ea8cc59233173e0ff27b2d.jpg','https://images.website.com/61ea8cc89233173e0ff27b36.jpg']
And I would like to replace first {image} with images[0], second {image} with images[1], , third {image} with images[2]...
This script can be used for this purpose
let s="{image} b {image} c {image}"
let images=['image1','image2','image3']
images.forEach(img=>{s=s.replace('{image}',img)})
console.log(s)
It really depends on what you are trying to do. The simplest approach would be the following. For a more robust approach though, for instance, if you aren't just replacing '{image}' or if the array possibly doesn't have the same number of parameters as the replacements in the strings, etc, you will probably want to use RegEx.
var content = 'Lorem ipsum dolor {image} sit amet, consectetur adipiscing elit {image}. Sed quis varius erat. Pellentesque in {image} magna feugiat mi imperdiet suscipit. Pellentesque eget lobortis justo. {image} Sed id pretium purus.';
const images = ['https://images.website.com/61ea8cc09233173e0ff27b1b.jpg','https://images.website.com/61ea8cc39233173e0ff27b24.jpg','https://images.website.com/61ea8cc59233173e0ff27b2d.jpg','https://images.website.com/61ea8cc89233173e0ff27b36.jpg'];
for (var i = 0, l = images.length; i < l; i++) {
content = content.replace('{image}', images[i]);
}
console.log(content);
You can do as follow:
const content = 'Lorem ipsum dolor {image} sit amet, consectetur adipiscing elit {image}. Sed quis varius erat. Pellentesque in {image} magna feugiat mi imperdiet suscipit. Pellentesque eget lobortis justo. {image} Sed id pretium purus.'
const images = ['https://images.website.com/61ea8cc09233173e0ff27b1b.jpg','https://images.website.com/61ea8cc39233173e0ff27b24.jpg','https://images.website.com/61ea8cc59233173e0ff27b2d.jpg','https://images.website.com/61ea8cc89233173e0ff27b36.jpg']
let result = content
images.forEach((img) => {
result = result.replace('{image}', img)
})
console.log(result);
Use a template literal:
const content = `Lorem ipsum dolor ${image[0]} sit amet, consectetur adipiscing elit ${image[1]}. Sed quis varius erat. Pellentesque in ${image[2]} magna feugiat mi imperdiet suscipit. Pellentesque eget lobortis justo. ${image[3]} Sed id pretium purus.`
Note the use of backticks around the string instead of quotes.
function replaceWithImages(str, images) {
const images_ = [...images].reverse();
return str.replace(/{image}/g, () => images_.pop() || '');
}
The benefit of doing it this way is that you only need to create one new copy of str
I am playing around with dom manipulation and js and I am running into a problem.
Let's say I have <p id = "description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
and I want to write a function that counts a number of repeated letters in a paragraph. I figured out how to do that with a string but not with paragraphs.
function recurringLetters() {
var myParagraph = document.getElementById("description").innerHTML;
}
}
Any thoughts?
This is how far I have gotten.
Hope This Answers your Question.
Just Copy & Paste into an HTML file for testing.
function WORD_COUNT( _THIS_ , _WORD_ ){
var TEMP = _THIS_.innerHTML;
var COUNT= 0;
// IF TEMP search result finds nothing, return is -1, so -1 is our stopping point
while(TEMP.search(_WORD_)>-1){
TEMP = TEMP.replace(_WORD_,'');
COUNT++;
document.getElementById('output').innerHTML=COUNT;
}}
<p onmouseover=WORD_COUNT(this,'us');>PUT YOUR MOUSE OVER ME.<BR> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras facilisis, felis et sagittis eleifend, justo ante maximus augue, id porta massa elit a ligula. </p>
<p ID=output>Output area<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
So I'm making a firefox addon to highlight words and reg. expressions and I'm having some troubles optimizing it.
This was the 1st attempt:
function highlight (searchText, replacement) {
var walker = document.createTreeWalker(document.body);
while(walker.nextNode()){
if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
var html = walker.currentNode.data.replace(searchText, replacement);
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
walker.currentNode.parentNode.replaceChild(frag,walker.currentNode);
}
}
}
But the walker.currentNode.parentNode.replaceChild(frag,walker.currentNode); line replaces the current node so the while(walker.nextNode()) stopped working.
I've solved it like this but i was looking for a cleaner solution:
function highlight (searchText, replacement) {
var walker = document.createTreeWalker(document.body);
var nextnode=true;
while(nextnode){
if(walker.currentNode.nodeType === 3 && searchText.test(walker.currentNode.nodeValue)){
//1~2 ms
var html = walker.currentNode.data.replace(searchText, replacement);
//~11-12 ms
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
//~11-12 ms
wrap.innerHTML = html;
//~36-37 ms
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
//73~74 ms
var nodeToReplace=walker.currentNode;
nextnode=walker.nextNode();
nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);
//83~85 ms
}else{
nextnode=walker.nextNode();
}
}
}
Also I'm trying to improve performance so I've made some test to look for the slower parts of the code (I've tested using a 1.64 mb lorem ipsum) so here are my questions:
Is there a faster alternative for the wrap.innerHTML = html; that is adding 25 ms to the code?
I'm pretty sure that this can't be optimized while (wrap.firstChild) {frag.appendChild(wrap.firstChild);} but it adds 37 ms so suggestions are welcome.
Feel free to use this code the snippet is a working example of the code and shows how to use the it.
Edited to show latest changes, you may need to edit the excludes to be less restrictive.
var regexp = /lorem|amet/gi;
highlight (regexp,'<span style="Background-color:#33FF33">$&</span>');
function highlight (searchText, replacement) {
var excludes = 'html,head,style,title,link,script,noscript,object,iframe,canvas,applet';
var wrap = document.createElement('div');
var frag = document.createDocumentFragment();
var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
var nextnode=true;
while(nextnode){
if(searchText.test(walker.currentNode.nodeValue)
&& (excludes + ',').indexOf(walker.currentNode.parentNode.nodeName.toLowerCase() + ',') === -1
){
var html = walker.currentNode.data.replace(searchText, replacement);
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
var nodeToReplace=walker.currentNode;
nextnode=walker.nextNode();
nodeToReplace.parentNode.replaceChild(frag,nodeToReplace);
}else{
nextnode=walker.nextNode();
}
}
}
<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 lorem 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 lorem adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
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>') );
});