How parse DOM to get emails Javascript - javascript

I'am building a Chrome extension that parses the entire DOM/HTML and replace any found email(multiple emails) with the following div:
<div class="email_tmp"> found_email <span>SAVE EMAIL</span></div>
EXAMPLE:
<body>
<div>Some Text...</div>
<div>text a#a.com text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text b#b.com text</span></div></div>
<span>Last text</span>
</body>
replaced to:
<body>
<div>Some Text...</div>
<div>text <div class="email_tmp"> a#a.com <span>SAVE EMAIL</span></div> text</div>
<div>Some Text...</div>
<p>More Text</p>
<div><div><span>text <div class="email_tmp"> b#b.com <span>SAVE EMAIL</span></div> text</span></div></div>
<span>Last text</span>
</body>
How can I search and replace the found email by the entire div and the string found_email by the email too?
I want to replace only the found email(s) string, nothing more...
I really appreciate any help.

Here is the total solution for what your looking for
HTML
<div id="main">
sdfsdsdfsdfsdf a#a.com sdfsdfsdfsdfsdfsdf
</div>
JavaScript
var page_content = document.getElementById('main').innerHTML;
var found_email = "<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>";
//gives an array of the emails
var email = page_content.match(/([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
//replaces the emails to your desired content
var result = page_content.replace(email, found_email);
//replaces the changed HTML back to the 'main' div
document.getElementById('main').innerHTML = result;
Here is the Fiddle
Update:
If you want to replace only the text without adding any class or tags to the content of the HTML, then it gets real complicated to write a vanilla script for the same. In that case I would highly suggest you to use this library which I found to be the perfect solution for your problem.
Its a library called findAndReplaceDOMText which uses inbuilt methods to solve the purpose. You just need to give the find(what to find) and replace(replacing HTML) like so,
findAndReplaceDOMText(document.getElementById('t'), {
find: /([a-zA-Z0-9._-]+#[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi,
replace: '<div class='email_tmp'> found_email <span>SAVE EMAIL</span></div>'
});
You can obviously revert if you face any problems in implementing this library.
Also this a must read article for you - replacing-text-in-the-dom-solved

Slight update on #NikhilNanjappa 's original answer: my version is less efficient, but it will keep the actual email address and prepend the div and append the span and closing tags, based on the original answer.
var save_email_beg = "<div class='email_tmp'> ";
var save_email_end = " <span>SAVE EMAIL</span></div>";
var i = 0;
for (; i < email.length; i++) {
var new_string = save_email_beg + email[i] + save_email_end;
page_content = page_content.replace(email[i], new_string);
}
document.getElementById('main').innerHTML = page_content;

Related

How to select elements from <template> with jQuery

I have two similar selections. The first uses a <div> tag, which works fine, the second uses a newly <template> tag, which doesn't work anymore.
Can anyone tell me how to get this to work with jQuery using the <template> tag?
HTML
<div id="div">
<div>content</div>
</div>
<template id="template">
<div>content</div>
</template>
JavaScript
var $div = $('#div');
var $content = $div.find('div');
console.log($content); //works ($content.length == 1)
var $template = $('#template');
var $content = $template.find('div');
console.log($content); //doesn't work ($content.length == 0)
http://jsfiddle.net/s8b5w0Le/1/
HTMLTemplateElement saves the DOM into a seperate attribute:
JQuery
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var $div = $('#div');
var $content = $div.find('div');
console.log($content.text()); // output "content", inner div
var $template = $('#template');
var node = $template.prop('content');
var $content = $(node).find('div');
console.log($content.text()); // output "content", inner template
});
JavaScript
document.createElement('template').content
I'm fairly certain this has to do with Chrome's use of shadow dom (thank Polymer... )
You can either try your luck using the /deep/ combinator (probably won't work on other browsers), but I think the most robust solution would be $template[0].outerHTML as in your comment if you just need the text.
If you need jQuery functionality, using $.parseXML (to avoid Chrome's native dom construction) would probably do the trick across all browsers (can confirm Chrome + FF).
Example here: http://jsfiddle.net/3fe9jjfj
var tc = $('#template')[0].outerHTML;
$template = $($.parseXML(tc)).contents();
console.log($template);
console.log($template.find('div'));
Both logs return as we'd expect, and $template can now be treated as an ordinary jQuery object.
As others have noted, Chrome puts <template> child elements into a shadow DOM. To access them:
// Access the JavaScript object for the template content
$('template')[0]
// Make a jQuery selection out of it
$($('template')[0])
// Now you can search it
$($('template')[0]).find('div.someclass').css('color','#000');
A way, too late for the party but I ended up doing this:
function resolveTemplate(id) {
return $(id).contents();
}
...
var $searchIcon = resolveTemplate('#search-icon-template');
$('#div').append($searchIcon);
You can use all the JQuery methods as usual if the element inside the template element are wrapped with a container.
const temp = $("#template").contents().clone();
$(temp).find("h1").text("A dynamic title");
temp.appendTo($("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app"></div>
<template id="template">
<div class="container">
<h1>lorem ipsum</h1>
<p>lorem ipsum </p>
<img src="" alt="">
</div>
</template>
The container can also be appended dynamically with JQuery. Or if you don't want a container, you can append its content.
const temp = $('<div></div>').html($("#template").contents().clone());
$(temp).find("h1").text('dynamic title');
$(temp).find("p").text('But no container this time');
temp.contents().appendTo($("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="app"></div>
<template id="template">
<h1>lorem ipsum</h1>
<p>lorem ipsum </p>
<img src="" alt="">
</template>
<template>
<div class="template-container">
<div class="content">content</div>
</div>
</template>
var templateHtml = ('#template').html() // this will return the template container div
var template = $(templateHtml);
var content = template.find('.content');
console.log(content);
var $content = $template.content.find('div');
... instead of ...
var $content = $template.find('div');
Worked for me.
HTML5 template is display: none; by default, childNodes in template is invalid, if you inspect it in console you'll find something different

How to wrap a group of HTML tags into a containing tag using javascript?

I've run into a problem that I don't know how to solve.
I need to wrap each grouping of <h2> and <p> tags with a containing <article> tag.
My current HTML looks something like this:
<h2 category="someCategory">
<p>text text text<p>
<h2 category="anotherCategory">
<p>text text text<p>
<p>text text text<p>
I need to use javascript to make it look like this:
<article>
<h2 category="someCategory">
<p>text text text<p>
</article>
<article>
<h2 category="anotherCategory">
<p>text text text<p>
<p>text text text<p>
</article>
Somehow the javascript needs to figure out that each new <h2> tag is the start of a new article element. And then that and the last <p> tag before the next <h2> tag will be end of the article.
(The bigger picture is that I'm parsing a markdown document and need the <article> tags as css hooks for layout.)
I have no idea how to begin solving this problem, so I would be grateful of any help!!
d13
UPDATE: Thank you!! I've tried both answers and they both work perfectly!
This will also remove the old HTML tags.
var articles = [], article, sibling, toDelete = [];
var h2s = document.getElementsByTagName("H2");
for(var i = 0, h2; h2 = h2s[i++];){
article = document.createElement("article");
sibling = h2.nextElementSibling;
article.appendChild(h2.cloneNode(true));
while(sibling && sibling.tagName !== "H2"){
if(sibling.tagName === "P"){
article.appendChild(sibling.cloneNode(true));
toDelete.push(sibling);
}
sibling = sibling.nextElementSibling;
}
articles.push(article);
}
while(toDelete.length > 0){
toDelete[toDelete.length-1].parentNode.removeChild(toDelete[toDelete.length-1]);
toDelete.pop();
}
while(h2s.length > 0){
h2s[0].parentNode.removeChild(h2s[0]);
}
for(i = 0, article; article = articles[i++];){
document.body.appendChild(article);
}

Javascript - JQuery : Cannot find id and .html("") or getElementById and set the innerHTML

I'm new to jQuery and can't add innerhtml to a div.
I have tried getElementById and also $('').html().
My javascript
var dishes = arg;
var starterDish = dishes[0];
var mainDish = dishes[1];
var dessertDish = dishes[2];
location.href=$('#finishButton').attr('href');
//The new HTML file
alert($('#starterDishName').html());
// will only return unidentified
$('#starterDishName').html(starterDish.name);
$('#starterDishPrep').html(starterDish.description);
$('#mainDishName').html(mainDish.name);
$('#mainDishPrep').html(mainDish.description);
$('#dessertDishName').html(dessertDish.name);
$('#dessertDishPrep').html(dessertDish.description);
run4 = false;
and the finish.html file:
</div>
<div id="starterDishName" align="center"> <h3>blablabla</h3></div>
<div id="starterDishPrep" align="center"> </div>
<div id="mainDishName" align="center"> <h3></h3></div>
<div id="mainDishProp" align="center"> </div>
<div id="dessertDishName" align="center"> <h3> </h3></div>
<div id="dessertDishProp" align="center"> </div>
</div>
I think the problem is located: location.href=$('#finishButton').attr('href');
and that the new html file wont allow me to use the ID's get?
QUESTION:
How can I get the id of the new html file and change the innerhtml of it from my code's perspective?
I assume you have this in a JavaScript file as you wrote: "My .js". And if you have included it in the head-section of your HTML the script is executed immediately and the selectors are not aware of all the HTML elements. Using jQuery you can simply wrap everything into a closure as this will get executed after the DOM is parsed:
$(document).ready(function() {
// your logic goes here
});
var id = document.getElementById('id').innerHTML;

Citing a text area?

I'm just getting started in programming and somehow can't come up with any sensible approach to the following problem, so any help would be greatly appreciated! I have a .html file structured like this:
<head>
<title>ABC</title>
</head>
<body>
<div class="norm">
...
<span class="jnenbez">13</span>
....
<div class="Absatz">text</div>
<div class="Absatz">text</div>
<div class="Absatz">CITE HERE**</div>
The "norm" div is the one parent node. The "jnenbez" span and the "Absatz" divs are inside the "norm" div, but how deeply they are nested can vary. Now I want to cite the "CITE HERE" area, meaning to generate the output of "jnenbez 13 Absatz 3 ABC" - meaning getting the text content of the "jnenbez" span of the same "norm" div, getting the index number of the "Absatz" div, since it is the third child "Absatz" of the "norm" div and getting the content.
1) How could I give this string to the user, so he could copy paste it somewhere else? It seems it is not easily possible to modify the copy+paste behavior of Firefox. An obvious solution would be to put the output in brackets like [jnenbez...] at the end of each divs text content, but that would reduce readability of the html...
2) Is it even possible to automatically generate this output via JQuery?
Not sure about a good way to store/display the info.
Also, unsure of what other mark-up you would have in the class='norm' container. This is vitally important and impacts entirely the shape of the useful solution.
I've assumed a particular structure - one that says the first contained span is one of interest. Another assumption is that the only divs in the container are of interest and need to be counted.
I'm sure you can break it easily enough. :D
<!DOCTYPE html>
<html>
<head>
<script>
function onBtnPress(element)
{
var result;
var cont = element.parentNode;
var span = cont.getElementsByTagName('span')[0];
result = span.className + " ";
result += span.innerHTML + " ";
var divList = cont.getElementsByTagName('div');
result += divList[0].className + " ";
result += divList.length+" ";
result += document.title;
cont.getElementsByTagName('p')[0].innerHTML = result;
}
</script>
<title>ABC</title>
</head>
<body>
<div class="norm">
<span class="jnenbez">13</span>
<div class="Absatz">text</div>
<div class="Absatz">text</div>
<div class="Absatz">CITE HERE**</div>
<button onclick='onBtnPress(this);'>click me</button>
<p>[string here]</p>
</div>
<div class="norm">
<span class="Crapple">8</span>
<div class="ipod">worst</div>
<div class="ipod">music</div>
<div class="ipod">player</div>
<div class="ipod">I ever</div>
<div class="ipod">bought</div>
<div class="ipod">CITE HERE**</div>
<button onclick='onBtnPress(this);'>click me</button>
<p>[string here]</p>
</div>
</body>
</html>

HTML how delete tag but not content

how can I delete with javascript html tag (for example span) but not the content and the html tags in the content?
one example:
<div id="content">
<span id=1 class="note" >
<p> <span id=1 class="note" >hello! its one example </span> </p>
<li> <span id=1 class="note" >yes,one example </span> </li>
</span>
</div>
the result should be:
<div id="content">
<p> hello! its one example</p><li>yes,one example</li>
</div>
Since you haven't mentioned that you need JQuery, following is the code that I propose:
http://jsfiddle.net/9qgK7/
Relevant code:
span.outerHTML = span.innerHTML;
Reference: https://developer.mozilla.org/en-US/docs/DOM/element.outerHTML
PS: Firefox only started supporting outerHTML since v11 but we are already using v15 :)
In your particular example, its probably best practice to just overwrite the immediate parentNode.
var content = document.getElementById('content'),
span = content.getElementsByTagName('span')[0],
p = content.getElementsByTagName('p')[0];
content.innerHTML = span.innerHTML;
Can easily be done with Jquery:
$('span.note').each(function(){
$(this).replaceWith($(this).html());
});
If you can use jQuery, try something like this
var newContent = $("#content span").html();
$("#content").html(newContent);
EDIT
Pure JS solution
var spans = document.getElementById("content").getElementsByClassName("note");
var out = "";
for (var i = spans.length - 1; i >= 0; i--) {
out += spans[i].innerHTML;
}
document.getElementById("content").innerHTML = out;
jsFiddle Example

Categories

Resources