I have to convert plain text urls to . I've found a JS code that works. My problem is that my HTML structure needs that I modify the code, putting the current code inside a foreach.
My html:
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
<div class="content">Some text with links</div>
The JS:
$(function()
{
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$('.content').html($('.content').html().replace(re, '$1'));
});
The above JS works, but will populate all the div's with the same content. I've tried to put this code in a foreach but have failed. My poor JS knowledge makes me ask this on SO.
Can you give some clues on how to put this code in a foreach loop?
Functions like .html allow a function to be passed. An .each loop is then done internally, and moreover you get the current value passed:
$('.content').html(function(i, current) {
return current.replace(re, '$1');
});
.html() for retrieval only selects the first matched element. You can do this pretty easily, though, because functions like .html can take a function argument for setting that iterates over each selected element individually.
$(".content").html(function (_, html) {
return html.replace(re ...etc...);
});
If I've understood your question correctly, you need to loop through each .content div, try this:
$('.content').each(function() {
var $content = $(this);
var re = /(https?:\/\/(([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?))/ig;
$content.html($content.html().replace(re, '$1'));
});
Related
So I'm not too familiar with data attributes and I wanted to see if I get can get some help from others.
I have an HTML portion as shown below:
<div class="columns is-multiline app-list"></div>
The app-list is being rendered by the following JS:
Is there a way that instead of calling app-list as a class, that I can do something like this:
<div class="columns is-multiline" data-source="application_launcher"></div>?
All help would be appreciated!
You can use the data-attribute as an selector in the querySelector(selector) method.
In your case just replace
const apps_target = document.querySelector('.app-list');
with the following line.
const apps_target = document.querySelector('[data-source="application_launcher"]');
Using jquery, is there a way to capture all the code between two divs?
For example; using the code below, if Show info is clicked than the code between the ws-css-table divs should be retrieved, i.e.
<div class="ws-css-table-tr"><div class="ws-css-table-td">A</div>... <div class="ws-css-table-td">D</div></div>
should be put into a text variable.
Here is a fiddle for the current code.
Thanks for any help.
<div class="ws-css-table">
<div class="ws-css-table-tr">
<div class="ws-css-table-td">A</div>
<div class="ws-css-table-td">B</div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td">C</div>
<div class="ws-css-table-td">D</div>
</div>
</div>
</br>
<div class='show_div_info'>Show info</div>
jquery
$(".show_div_info").click(function(){
alert ("info?")
});
Here's the classic javascript and a single liner technique using innerHTML:
$(".show_div_info").click(function(){
alert($('.ws-css-table')[0].innerHTML);
});
https://jsfiddle.net/vy5mok8k/3/
$(".show_div_info").click(function(){
var children = $(".ws-css-table").html();
$(".children").html(children);
});
https://jsfiddle.net/vy5mok8k/2/
Do you mean to capture the elements inside the table and do something with it later?
$(".show_div_info").click(function(){
var table = $(".ws-css-table");
// Do something
});
Do you mean to capture the literal code inside the table? Say hello to the html() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").html();
// Do something
});
Do you mean to capture the actual text inside the table? Say hello to the text() function:
$(".show_div_info").click(function(){
var table = $(".ws-css-table").text();
// Do something
});
The more practical one would be the first one, since you will be able to use it to manipulate the elements inside as you need.
Second one just grabs the actual code, perhaps you need it to show off your awesome skills.
The last one will print the text, neat if you use it to parse or log what you have thus far done.
How did that help?
Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/
Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();
If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();
jQuery .remove() will do
$("#div2").remove();
The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.
I'd like to get the text from between the "p" tags and put it in an other element, like this:
before:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p></p>
</div>
after:
<div id="Text">
<p>$1,200.00</p>
</div>
<div id="putText">
<p>$1,200.00</p>
</div>
Anyone know of a Javascript that can do this?
The below function copies the contents of the first paragraph under an element with ID ID to a paragraph under another element with ID putID.
function copyContents(id) {
var source = document.getElementById(id).getElementsByTagName("p")[0];
var target = document.getElementById("put" + id).getElementsByTagName("p")[0];
target.innerHTML = source.innerHTML;
}
copyContents("Text");
you can use following jQuery code
$('#putText p').html($('#Text p').html());
If you have jQuery at your disposal, it's fairly easy - something like this should work:
$('#putText>p').text($('#Text>p').text())
If you don't, then you'll have to resort to some DOM manipulation - the same stuff jQuery does behind the scenes, only you need to code it up yourself.
Does anyone know how to stop jQuery fromparsing html you insert through before() and after()? Say I have an element:
<div id='contentdiv'>bla content bla</div>
and I want to wrap it in the following way:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
I use the following jQuery/Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
This however will not result in the correct wrapping, it will create:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Using wrap() won't work either since that gets jQuery even more mixed up when using:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
How should I solve this?
Thanks in advance!
$('#contentDiv').each(function() {
$(this).wrap('<div id="wrapperDiv">');
$(this).before('<div id="beforeDiv">');
$(this).after('<div id="afterDiv">');
});
produces:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
your markup isn't complete...before and after are to take complete nodes only...
what you are trying to do is wrap your content, which is different.
you want this:
.wrap(html);
http://docs.jquery.com/Manipulation/wrap#html
I think you're approaching it wrong. Think about what you actually want to achieve...
You want to WRAP everything with one div. Then insert 1 div before, and 1 div after.
so do .wrap() first, then append before and after-divs relative to the content-div.
if you happen to have the actual HTML as a string (from an XHR or something) then you need to read out the html and concatenate it yourself as Douglas Mayle suggested.
I'm sorry, but this one should be obvious. In your case, you can't use wrap because it sticks the original node into the deepest node it finds in the wrapping HTML. You don't want that. Instead, read out the HTML from your object and combine it with what you have:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}