I have a paragraph in which i want to find the span tag with attribute data-f and get the remaining span tags and append them as child into the span tag with that attribute.
let para = <p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0);">
<span style="font-size: 10pt; font-family: 'Times New Roman';">
<span data-f="63f309c7cc71a7ae90e40d3b" istextblock="false">Authorized share capital is <span data-f1="63f309c6cc71a7ae90e4098c" istextblock="false">unlimited</span></span>
</span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"> with no par value per Share. Shares issued and outstanding at March 31, 2022 were 50,500,000 and at December 31, 2021 were </span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4" istextblock="false">44,750,000</span></span>
<span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89 and $22.24, respectively.</span>
</p>
Here is the code
const footnoteSpan = para.querySelector("span[data-footnote]");
const childSpans = Array.from(pTag.querySelectorAll("span")).filter((span) => span !== footnoteSpan && span.querySelector("span[data-footnote]") === null && span.textContent.trim() !== footnoteSpan.textContent.trim());
childSpans.forEach((span) => {
footnoteSpan.appendChild(span.cloneNode(true));
span.parentNode.removeChild(span);
});
this is the output i am getting
<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0); margin-top: 0pt; margin-bottom: 0pt;">
<span style="font-size: 10pt; font-family: 'Times New Roman';">
<span data-f="63f309c7cc71a7ae90e40d3b">
Authorized share capital is <span data-fact="63f309c6cc71a7ae90e4098c">unlimited</span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"> with no par value per Share. Shares issued and outstanding at March 31, 2022 were 50,500,000 and at December 31, 2021 were </span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span>
<span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89 and $22.24, respectively.</span>
</span>
</span>
</p>
as you can see here that this is getting repeated for some reason
<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span>
Expected output
<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0); margin-top: 0pt; margin-bottom: 0pt;">
<span style="font-size: 10pt; font-family: 'Times New Roman';">
<span data-f="63f309c7cc71a7ae90e40d3b">
Authorized share capital is <span data-fact="63f309c6cc71a7ae90e4098c">unlimited</span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"> with no par value per Share. Shares issued and outstanding at March 31, 2022 were 50,500,000 and at December 31, 2021 were </span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-f1="63f309c6cc71a7ae90e409a4">44,750,000</span></span>
<span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89 and $22.24, respectively.</span>
</span>
</span>
</p>
p > span
const footnoteSpan = document.querySelector("span[data-footnote]");
const childSpans = Array.from(document.querySelectorAll("p > span")).filter((span) => span !== footnoteSpan && span !== footnoteSpan.parentNode);
childSpans.forEach((span) => {
footnoteSpan.appendChild(span.cloneNode(true));
span.parentNode.removeChild(span);
});
<p style="text-align: left; border-width: 0.5pt; border-style: initial; border-color: rgb(0, 0, 0);">
<span style="font-size: 10pt; font-family: 'Times New Roman';">
<span data-footnote="63f309c7cc71a7ae90e40d3b" istextblock="false">Authorized share capital is <span data-fact="63f309c6cc71a7ae90e4098c" istextblock="false">unlimited</span></span>
</span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"> with no par value per Share. Shares issued and outstanding at March 31, 2022 were 50,500,000 and at December 31, 2021 were </span>
<span style="font-size: 10pt; font-family: 'Times New Roman';"><span data-fact="63f309c6cc71a7ae90e409a4" istextblock="false">44,750,000</span></span>
<span style="font-size: 10pt; font-family: 'Times New Roman';">. Net asset values per Share at March 31, 2022 and December 31, 2021 were $23.89 and $22.24, respectively.</span>
</p>
Related
I have a script for scrolling, everything works on my other projects, but not on one. I can't understand what the problem is. Just started learning JS. so I will be grateful for your kind tips. The project is uploaded to firebase if anyone wants to look at it in the inspector.
$(function() {
$("[data-scroll]").on("click", function(event){
event.preventDefault();
blockId = $(this).data('scroll');
blockOffset = $(blockId).offset().top;
$("html, body").animate({
scrollTop: blockOffset - 50
}, 700);
});
$("[data-modal]").on("click", function(event){
event.preventDefault();
$(modal_window).addClass('show');
});
$(document.querySelector(".close_modal")).on("click", function() {
$(modal_window).removeClass('show');
});
});
and ran into a problem with the modal window, more specifically with the animation. when clicking on the GET STARTED button, a modal window pops up. you can close it in 2 ways by clicking on the cross, the animation works hum. and clicking on the send message button, and then the window disappears without animation, although the classes are the same
$(function() {
$("[data-scroll]").on("click", function(event){
event.preventDefault();
blockId = $(this).data('scroll');
blockOffset = $(blockId).offset().top;
$("html, body").animate({
scrollTop: blockOffset - 50
}, 700);
});
$("[data-modal]").on("click", function(event){
event.preventDefault();
$(modal_window).addClass('show');
});
$(document.querySelector(".close_modal")).on("click", function() {
$(modal_window).removeClass('show');
});
});
.header_nav > a, .lang_select > select {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 100%;
color: #111A45;
text-decoration: none;
}
.header_section {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
color: #FFFFFF;
}
.header_section h3 {
font-weight: 500;
font-size: 7.6rem;
line-height: 100%;
}
.header_section p {
font-weight: 400;
font-size: 2.4rem;
line-height: 140%;
}
.modal_window > h4 {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 2.1rem;
background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.modal_window > h2 {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 3.6rem;
line-height: 4.6rem;
color: #111A45;
}
#name, #mail, #message {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1.6rem;
line-height: 2.1rem;
color: #111A45;
}
.first_right {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
color: #111A45;
}
.first_right h3 {
font-family: "TT Firs Neue", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 4.8rem;
line-height: 6.2rem;
background: linear-gradient(103.85deg, #F33F5E 0%, #FA8550 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.first_right h4 {
font-weight: 500;
font-size: 2rem;
line-height: 150%;
}
.first_right p {
font-weight: 400;
font-size: 1.7rem;
line-height: 150%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="header_nav">
<img src="img/header_logo.png" alt="logo">
Technology
Advantages
How it works
Packages
Contact
<div class="lang_select">
<img src="img/lang_ico.svg" alt="lang_ico">
<label>
<select>
<option value="0">ENG</option>
<option value="1">UKR</option>
<option value="2">PL</option>
</select>
</label>
</div>
<button type="submit" class="orange_btn" data-modal="#modal_window">Get started</button>
</div>
<div class="header_section">
<h3 class="header_section_title">MapStars Technology</h3>
<p>Get new customers regularly with the help of modern technologies</p>
<button type="submit" class="blue_btn" data-modal="#modal_window">Get started<img
src="img/right_arrow_white.svg" alt="white arrow">
</button>
<img src="img/header_bg.png" alt="bg">
</div>
<div class="modal_window_wrap" id="modal_window">
<div class="modal_window">
<h4>Contact Form</h4>
<h2>Drop Us a Line.</h2>
<img src="img/close_btn.svg" alt="close" class="close_modal">
<form action="">
<label for="name"><input type="text" id="name" name="firstname" placeholder="First Name*"></label>
<label for="mail"><input type="email" name="mail" id="mail" placeholder="E-mail*"></label>
<label for="message"><input type="text" name="message" id="message" placeholder="Message..."></label>
<button type="submit" class="close_modal orange_btn">Send a Message</button>
</form>
</div>
</div>
</header>
<main>
<div class="section_first" id="technology">
<img src="img/section_two_foto.png" alt="section foto">
<div class="first_right">
<h3>Technology</h3>
<h4>GEO advertising is a technology for the automatic promotion of a business using modern technologies and
services.</h4>
<p>The technology is specially made to promote almost all types of businesses. Cafes, restaurants, beauty
salons and hairdressers, hotels and hostels, service stations and tire shops, repair service centers,
online stores, grocery stores, supermarkets, photo studios, publishing houses, confectioneries, and many
others have already used the technology.</p>
</div>
</div>
I use Courier New font to display top 10 scores achieved on my single purpose arcade game website (see the attached screenshot ). Player aliases in Latin and extended Cyrillic characters align perfectly, but someone decided to enter a nickname in Asian (looks to be Chinese) characters, and my JS (TS) code doesn't handle it properly, so the columns following the player's name get shifted. Anyone knows of the best way for handling this? I've been thinking of leaving it alone due to its questionable importance, but I'm still curious. I've examined this article, and it doesn't seem to be directly pertinent to the described issue.
Edited for the code below.
CSS:
.titleLabel {
margin-top: 7px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 30px;
text-align: center;
color: blue;}
.dash {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: blue;}
.dashRed {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: red;}
.dashSpace {
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: #f0f0f0;}
HTML:
<div>
<div class="titleLabel">T O P 10 S C O R E S</div>
<!-- headings -->
<span class="dash" id="p1"><span class="dashSpace">-----</span>1<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
<!-- p2... p9 -->
<span class="dash" id="p10"><span class="dashSpace">----</span>10<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
dashRed class is used for displaying the score to the player who just finished the game and managed to get into the top 10 score listing. Older scores get displayed in blue. HTML code lines with id 'p1' to 'p10' get dynamically replaced with data from window.sessionStorage by JavaScript code.
I am working on a signature generator for emails and I want to copy the final signature with the press of a button instead of manually selecting the signature and copying it to the clipboard. This means I need the image, text and styling for them.
I have tried a couple of variants, including the w3schools one, but no success, some of them are only copying the text, but without the styling.
Example: https://www.mail-signatures.com/signature-generator/
Please try the below code.
function copyToClipboard(html) {
var container = document.createElement('div')
container.innerHTML = html
container.style.position = 'fixed'
container.style.pointerEvents = 'none'
container.style.opacity = 0
document.body.appendChild(container)
window.getSelection().removeAllRanges()
var range = document.createRange()
range.selectNode(container)
window.getSelection().addRange(range)
document.execCommand('copy')
document.body.removeChild(container);
alert("Copied")
}
document.querySelector('button').onclick = function () {
var htmlEditor = document.getElementById("html");
copyToClipboard(htmlEditor.innerHTML)
}
<button>Copy</button>
<div id="html">
<!-- The HTML you want to copy -->
<table style="width: 525px; font-size: 11pt; font-family: Arial, sans-serif;" cellpadding="0" cellspacing="0" fgid="15712">
<tbody fgid="15718">
<tr fgid="15724">
<td width="125" style="font-size: 10pt; font-family: Arial, sans-serif; border-right: 1px solid; border-right-color: #fb6303; width: 125px; padding-right: 10px; vertical-align: top;" valign="top" rowspan="6" fgid="15730">
<img border="0" alt="Logo" width="105" style="width:105px; height:auto; border:0;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/logo.png" fgid="15742">
</td>
<td style="padding-left:10px" fgid="15749">
<table cellpadding="0" cellspacing="0" fgid="15755">
<tbody fgid="15761">
<tr fgid="15767">
<td style="font-size: 10pt; color:#0079ac; font-family: Arial, sans-serif; width: 400px; padding-bottom: 5px; padding-left: 10px; vertical-align: top;" valign="top" fgid="15773">
<strong fgid="15779"><span style="font-size: 11pt; font-family: Arial, sans-serif; color:#fb6303;" fgid="15785">Sohail Ashraf</span></strong>
<strong style="font-family: Arial, sans-serif; font-size:11pt; color:#000000;" fgid="15793"><span fgid="15799"> | </span>Sales & Marketing Director</strong>
</td>
</tr>
<tr fgid="15808">
<td style="font-size: 10pt; color:#444444; font-family: Arial, sans-serif; padding-bottom: 5px; padding-top: 5px; padding-left: 10px; vertical-align: top; line-height:17px;" valign="top" fgid="15814"> <span fgid="15820"> <span style="color: #fb6303;" fgid="15827"><strong fgid="15833">a: </strong></span> </span> <span fgid="15842"> <span style="font-family: Arial, sans-serif; font-size:10pt; color:#000000;" fgid="15849">My Company</span> </span> <span fgid="15858"> <span style="font-size: 10pt; font-family: Arial, sans-serif; color: #000000;" fgid="15865"><span fgid="15871"> | </span>Street, City<span fgid="15879"></span></span> <span style="font-size: 10pt; font-family: Arial, sans-serif; color: #000000;"
fgid="15886"><span fgid="15892"> | </span>Zip Code, Country</span>
</span> <span fgid="15902"><br fgid="15908"></span> <span fgid="15915"><span style="color: #fb6303;" fgid="15921"><strong fgid="15927">e:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;"
fgid="15934"> john.doe#my-company.com</span></span> <span fgid="15942"><span fgid="15948"> | </span><span style="color: #fb6303;" fgid="15955"><strong fgid="15961">w:</strong></span><a href="http://www.my-company.com"
target="_blank" rel="noopener" style="text-decoration:none;" fgid="15968"><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="15974"> www.my-company.com</span></a></span>
<span fgid="15982"><br fgid="15988"></span> <span fgid="15995"><span style="color: #fb6303;" fgid="16001"><strong fgid="16007">m:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;"
fgid="16014"> (800) 555-0299</span></span>
<span fgid="16022"><span fgid="16028"> | </span><span style="color: #fb6303;" fgid="16035"><strong fgid="16041">p:</strong></span><span style="font-size: 10pt; font-family: Arial, sans-serif; color:#000000;" fgid="16048"> (800) 555-0199</span></span>
</td>
</tr>
<tr fgid="16056">
<td style="font-size: 10pt; font-family: Arial, sans-serif; padding-bottom: 0px; padding-top: 5px; padding-left: 10px; vertical-align: bottom;" valign="bottom" fgid="16062">
<span fgid="16068"><img border="0" width="19" alt="facebook icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/fb.png" fgid="16080"> </span>
<span fgid="16087">
<img border="0" width="19" alt="twitter icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/tt.png" fgid="16099"> </span>
<span fgid="16106">
<img border="0" width="19" alt="youtube icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/yt.png" fgid="16118"> </span>
<span fgid="16125">
<img border="0" width="19" alt="linkedin icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/ln.png" fgid="16137"> </span>
<span fgid="16144">
<img border="0" width="19" alt="instagram icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/it.png" fgid="16156"> </span>
<span fgid="16163">
<img border="0" width="19" alt="pinterest icon" style="border:0; height:19px; width:19px" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator-dm/bease-fox/pt.png" fgid="16175"> </span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
document.execCommand() is deprecated.
With Clipboard API you can do the same in a very much simpler way:
try {
const htmlCode = document.getElementById("html").innerHTML
const blobInput = new Blob([htmlCode], { type: 'text/html' })
navigator.clipboard.write([new ClipboardItem({ 'text/html': blobInput })])
alert('Copied')
} catch (e) {
alert(e)
}
C# Code:-
dynamic RetArgs = new JObject();
RetArgs.abcTest= System.Text.RegularExpressions.Regex.Replace(abcTest, #"<[^>]*(>|$)| ||»|«", string.Empty).Trim();
showing parameter value:-
<div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Arimo; vertical-align: baseline; color: rgb(0, 0, 0);">
Take your medicines as per following directions for 1 month/ 1 महिने के लिए</div>
expected result :-
Take your medicines as per following directions for 1 month/ 1 महिने के लिए
I recommend using HtmlAgilityPack (available on NuGet)
This code:
string html = "<div style="box-sizing: border-box; margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Arimo; vertical-align: baseline; color: rgb(0, 0, 0);">
Take your medicines as per following directions for 1 month/ 1 महिने के लिए</div>";
var htmlDoc = new HtmlAgilityPack.HtmlDocument();
htmlDoc.LoadHtml(description);
var fixedHtml = htmlDoc.DocumentNode.InnerText;
Produces this output:
Take your medicines as per following directions for 1 month/ 1 महिने के लिए
I want to display child element's contents inline,should display in inline and preserving each elements css,text can be able to wrap if it not fits in one line.
I want to display all contents in first span preserving style of each element.
code -
<h2>
<span tabIndex="33" id="ctl00_MainContent_101">
<div style="text-align: left; color: rgb(0, 0, 0); font-family: Segoe UI; font-style: normal; font-weight: normal;">
<p style="margin: 0px; font-family: Microsoft Sans Serif;">
<span style="font-family: Arial; font-weight: bold;">
<span>What is your name? </span>
</span>
<span style="color: rgb(0, 112, 192); font-family: Arial; font-style: italic;">
<span>Brief Introduction</span>
</span>
</p>
</div>
</span>
</h2>
The contents are now showing in two lines.
I have tried display:inline/inline-block/block so far
please help
Thanks in advance