Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Showing XML code in an HTML page could be difficult.
XML tags will be recognized as HTML tags, so they will be not showed as they should.
Escaping the angular brackets <> works, but then the xml code will be showed all in black, difficult to read. Is there a way to stylize XML code in an HTML page, as I would read it in an XML editor?
Here's my javascript function that changes style to xml-key-words!!
(unfortunately it doesn't indent xml)
It accepts plain XML text as input, and return HTML styled code, with xml as text, coloring
XML keywords with different colors as in an editor.
function stylizeXML(xml)
{
xml = xml.replace(/>/g,">");
xml = xml.replace(/</g,"<");
xml = xml.replace(/\>\</g, "> <br> <"); // >< becomes > <br> <
var greens=xml.match(/<(\S+\s+)+[\S]+\=\"[^>]+>/g); // ...=
for (i=0; i<greens.length; i++)
{
greens=xml.match(/\s+\S+\=\"/g);
for (i=0; i<greens.length; i++)
{
green = greens[i];
green = green.replace(/\=\"/g, '=</span>"');
attributes = green.match(/\s+\S+\=<\/span>\"/g);
for(j=0; j<attributes.length; j++)
{
attribute2 = "<span class='color_green'>"+attributes[j];
green = green.replace(attributes[j], attribute2);
}
xml = xml.replace(greens[i], green);
}
}
var blues=xml.match(/\<(.*?)\>/g); // < ... >
for (i=0; i<blues.length; i++)
{
blue = blues[i];
blue = blue.replace("</","");
blue = blue.replace("<","");
blue = blue.replace(">","");
if (blues[i].match(/^\<\//))
// </ ... >
{xml = xml.replace(blues[i], "<span class='color_orange'></</span><span class='color_blue'>"+blue+"</span><span class='color_orange'>></span>");} // </
else
// < ... >
{xml = xml.replace(blues[i], "<span class='color_orange'><</span><span class='color_blue'>"+blue+"</span><span class='color_orange'>></span>");}
}
var reds=xml.match(/\=<\/span>(\s*)\"(.*?)\"/g); // ="..."
for (i=0; i<reds.length; i++)
{
red = reds[i];
red = red.replace("=</span>","");
xml = xml.replace(reds[i], "=</span><span class='color_red'>"+red+"</span>");
}
return xml;
}
here's the CSS associated:
<style type="text/css">
.color_orange
{color :rgb(255,96,24);}
.color_blue
{color :blue;}
.color_red
{color :rgb(234, 49, 176);}
.color_green
{color : rgb(72,150,163);}
</style>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
I'm trying to replace all HREF with domain1.com with the URL described in his title (if it has a title).
var els = document.getElementsByTagName('a'),
for (els in url) {
if (url.includes(domain1)); {
var titulo = url.attr('title');
var enlace = url.attr('href');
url.replace(enlace, titulo);
}
}
<p style="margin:40px;" line-height:2px;=""><img src="https://www.domain1.com/738956_1.jpg" data-width="1070" data-height="1387" data-image="738956-sanKH" alt="738956-sanKH.jpg">XS texto<br>
<img src="https://www.domain1.com/738956_1.jpg" data-width="1077" data-height="1693" data-image="738956-iMkWh" alt="738956-iMkWh.jpg">S texto</p>
I'm a beginner in javascript. Sure have a lot of format mistakes. Thanks in advance
Here is a tested JavaScript code, replace the for..of with for..in if you want to support Internet Explorer browser.
var domain1 = 'domain1.com';
var els = document.getElementsByTagName('a');
for (var url of els) {
var title = url.getAttribute('title');
if (title && url.getAttribute('href').search(domain1) !== -1) {
url.setAttribute('href', title);
}
}
If your DOM is having all the links after document load, then you can do this:
window.onload = bindEvents;
function bindEvents() {
// replace href with title
bindAnchorTitleAsHref();
}
function bindAnchorTitleAsHref() {
const els = document.getElementsByTagName('a');
for (let i = 0; i < els.length; i += 1) {
const title = els[i].getAttribute('title');
const href = els[i].getAttribute('href')
els[i].setAttribute('href', title);
console.log('New Href set :', els[i].getAttribute('href'), 'instead of', href);
}
}
<a
href="https://www.domian1.com/plants"
title="https://www.newdomain.com/test1"
target="_blank"
rel="nofollow noopener"
>
texto
</a>
If you just want to update the domain of the link, then you can use the URL class:
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('a[title]').forEach(el => {
const href = new URL(el.href);
if ((/[\^\.]domain1.com$/i).test(href.host)) {
const title = new URL(el.title);
href.host = title.host;
el.href = href.toString();
}
});
});
<p style="margin:40px;" line-height:2px;=""><img src="https://www.domain1.com/738956_1.jpg" data-width="1070" data-height="1387" data-image="738956-sanKH" alt="738956-sanKH.jpg">XS texto<br>
<img src="https://www.domain1.com/738956_1.jpg" data-width="1077" data-height="1693" data-image="738956-iMkWh" alt="738956-iMkWh.jpg">S texto</p>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want something similar to f" {variable} " of python
Ive tried
function press()
{
for(var i=0; i<4; i++)
{
if(!document.getElementById('ip'+i).value)
{
alert("error");
break;
}
}
but it didnt work.
I want something similar to f" {variable} " of python
template strings ${variable}
In JavaScript you can use template strings
The usage is
` ${variable} `
document.getElementById('btn').addEventListener('click', press)
function press() {
for (var i = 0; i < 4; i++) {
if (!document.getElementById(`ip${i}`).value) {
alert("error");
break;
}
}
}
<input id="ip0"/>
<input id="ip1"/>
<input id="ip2"/>
<input id="ip3"/>
<button id="btn">Click</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am trying to export a table in a jsp page to excel sheet using a button. The button on clicking should give a dialogue box to save or cancel. I need the code using java or javascript.
Excel export script works on IE7+, Firefox and Chrome
function fnExcelReport()
{
var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j=0;
tab = document.getElementById('headerTable'); // id of table
for(j = 0 ; j < tab.rows.length ; j++)
{
tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text=tab_text+"</table>";
tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html","replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
Just create a blank iframe:
<iframe id="txtArea1" style="display:none"></iframe>
Call this function on:
<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
For example I have the following text with no tags at all within the HTML page:
Color: red
Shape: square
Side: 1mm
As much rows as needed, but three is quite enough for this question. Even one would be.
In those rows I'll always have the beginning of the text string, colon+space (: ) and the end of the text string.
How should I turn the beginning of the text string into <tr><td>, colon+space into :</td><td> and the end of the text string into </td></tr>?
Thanks to #Andrew Willems (the script) and #Phil (further suggestions) everything is up and running.
The original text here has some extra unnecessary lines before and after the text to demonstrate the need for dealing with, and the ability to deal with, extra lines.
var opening = '<table id="newborn_table"><tbody>';
var closing = '</tbody></table>';
var origText = document.querySelector('#source').innerText;
var lines = origText.split('\n').filter(function(line) {
return (line !== "");
});
var rowsText = '';
lines.forEach(function(line) {
var parts = line.split(': ');
rowsText +=
'<tr><td>' +
parts[0] +
'</td><td>' +
parts[1] +
'</td></tr>'
});
document.querySelector('#result').innerHTML =
opening + rowsText + closing;
#newborn_table td {
border: solid red 1px;
}
<p>Original text:<p>
<pre id="source">
Color: red
Shape: square
Side: 1mm
</pre>
<p>Parsed table:</p>
<div id="result"></div>
Assuming you actually want something like...
<table id="newborn_table">
<tbody>
<tr>
<td>Color</td>
<td>red</td>
</tr>
<tr><!-- etc --></tr>
</tbody>
</table>
You should be able to map your string like so
function createTable(str, id) {
let table = document.createElement('table'),
tbody = document.createElement('tbody');
table.setAttribute('id', id || 'newborn_table');
table.setAttribute('border', 1);
table.appendChild(tbody);
str.split('\n').forEach(row => {
let tr = document.createElement('tr');
row.split(': ').forEach(cell => {
let td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
return table;
}
var str = `Color: red
Shape: square
Side: 1mm`;
document.body.appendChild(createTable(str));
UPDATE: The question was resolved by me, enlighted by some busy guy... :)
I have an HTML who contains a textarea called "request", I created the JS code below to transform any text into an xml who fit the needs of some business requirements, the problem is the transformation occurs one time in the first line only, I mean, I clicked on "transform txt2xml" button and only transform the first line pasted in the textarea, and did not continue with the second, third, etc.
I have to process a file who contains 300 or less elements and I want to automatize a bit the process.
Could be any way to paste all elements in the textarea, then separate each line, transform each separated element into xml one after the other in the same textarea?
function ss2xml_v5() {
var headerPart = "<?xml version=\"1.0\" encoding=\"utf-8\"?><A><B><C>";
var body_1 = "<1><2>";
var body_2 = "</2><3><4>";
var body_3 = "</4><5>";
var body_4 = "</5><6>";
var body_5 = "</6></3><7>";
var body_6 = "</7></6></3>";
var footerPart = "</1></C></B></A>";
var lines = $('textarea[name=request]').val().split('\n');
$.each(lines, function(){
for (var i = 0; i < this.length;i++) {
var ID = this.substring(0, 17);
var ID = ID.replace(/^\s+|\s+$/g,'')
var NAME = this.substring(18, 36);
var NAME = NAME.replace(/^\s+|\s+$/g,'');
var LAST_NAME = this.substring(37, 47);
var LAST_NAME = LAST_NAME.replace(/^\s+|\s+$/g,'');
var PHONE = this.substring(48, 58);
var PHONE = PHONE.replace(/^\s+|\s+$/g,'');
var NUMBER = this.substring(59, 62);
var NUMBER = NUMBER.replace(/^\s+|\s+$/g,'');
//Set XML //
var xmlToSet = headerPart+body_1+ID+body_2+NAME+body_3+LAST_NAME+body_4+PHONE+body_5+NUMBER+body_6+footerPart+'\n\n';
}
//Print XML
document.getElementById("response").value += xmlToSet;
});
}
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Press button to transform text to xml:<br/>
<button onClick="ss2xml_v5();">SS to XML</button>
<br/><br/>
<textarea name="request" id="request">AA_Address_AA John Good 2025547416 02
BB_Address_BB John Good 2025547416 02</textarea>
<br/><br/>
<textarea name="response" id="response"></textarea>
</body>
</html>
Some code in the correct position to: Separate each line in the text, then loop the function who transform the text to xml...
var lines = $('textarea[name=request]').val().split('\n');
$.each(lines, function(){
for (var i = 0; i < this.length;i++) {
... ...
}
});