Develop Reference

Rendering HTML as... HTML? In Vanilla JS

So I have what should be a simple problem: I want to render some HTML as HTML and not as a string. My code takes a list from a textarea, then alphabetizes it, then spits it out in <span> tags. But I want the HTML to actually render and not literally display "<span>Bar</span><span>Foo</span>".
I'm trying DOMParser, which seems like it should be the answer, but somehow I'm missing a step.
const mwInput = document.querySelector('.mw__input');
const mwOutput = document.querySelector('.mw__output');
var stringToHTML = function(str) {
var parser = new DOMParser();
var theParsed = parser.parseFromString(str, 'text/html');
return theParsed.body;
}
document.querySelector('#alphabetize').addEventListener('click', function(){
var theText = mwInput.value;
theText = mwInput.value.split('\n').sort();
var theOutput = '';
theText.map(
function(item, i) {
theOutput += '<span>' + item + '</span>';
}
);
mwOutput.innerHTML = stringToHTML(theOutput).innerHTML;
});

How to dynamically add <a> tags given an index of HTML page's string?

I'm making a search function for my website. So far, I've found the string the user searches for in the whole website, and I'm able to print the string and the context of the string. I have achieved this by using $.get on my HTML pages, then stripping the HTML to leave the pure text I want to search in. I then find the index of the string I'm looking for, then use substr to find the context of the input string (a few indexes ahead and behind).
Now, I need to link to the original page when a user clicks on a search result. My research says to use <a> tags, but how do I dynamically insert those into the HTML page with the index I have? And the index I have isn't even the complete page; it's stripped of tags.
These are the relevant parts of my code:
JavaScript:
function getIndicesOf(searchStr, str) { //get the indices of searchStr inside of str
var searchStrLen = searchStr.length;
if (searchStrLen == 0) {
return [];
}
var startIndex = 0, index, indices = [];
str = str.toLowerCase();
searchStr = searchStr.toLowerCase();
while ((index = str.indexOf(searchStr, startIndex)) > -1) {
indices.push(index);
startIndex = index + searchStrLen;
}
return indices;
}
function search() {
obj=document.getElementById("searchButton");
obj.onclick = function() {
var searchInput = document.getElementById('searchBox').value;
var allPageContent = ['chap/telem.php', 'chap/nestor.php', 'chap/aeolus.php', 'chap/calypso.php', 'chap/circe.php', 'chap/cyclops.php', 'chap/eumaeus.php', 'chap/hades.php','chap/ithaca.php', 'chap/lestry.php', 'chap/lotus.php', 'chap/nausicaa.php', 'chap/oxen.php', 'chap/penelope.php', 'chap/proteus.php', 'chap/scylla.php', 'chap/sirens.php', 'chap/wrocks.php']; //contains all text
var allText = '';
for (var i = 0; i < allPageContent.length; i++){
$.get(allPageContent[i], function(data){
var div = document.createElement("div");
div.innerHTML = data;
//allText = div.textContent || div.innerText || ""; //gets the text to search in, stripped of html
alltext = data;
allText = allText.replace(/(\r\n\t|\n|\r\t)/gm," ");
console.log(data);
var indices = getIndicesOf(searchInput, allText); //the variable indices is the array that contains the indices of the searched text in the main text
indices.forEach(findContext);
})
}
localStorage.output = '';
function findContext(currentValue, index) {
if (currentValue <= 16) {
searchContext = "..." + allText.substr(currentValue, 100) + "...";
} else {
searchContext = "..." + allText.substr(currentValue-15, 100) + "...";
}
localStorage.output = localStorage.output + searchContext + "<br /><br />";
}
console.log(localStorage.output);
};
};
HTML:
<script>document.getElementById("output").innerHTML = localStorage.output;</script>

It's a bit confusing what you're trying to achieve, considering your HTML, but replying to this
My research says to use <a> tags, but how do I dynamically insert
those into the HTML page with the index I have?
this would do the trick
var output = document.getElementById("output");
var a = document.createElement("a");
var linkText = document.createTextNode("my linked text");
a.appendChild(linkText);
a.href = "http://example.com";
output.appendChild(a);

stop converting xml tags to lowercase - jquery

I am working on Draw.io in which I have to convert json to XML, which I successfully did, But I am facing an issue in which all my xml tags goes to lowercase auto.
Lets Say, If I create tag with <mxCell></mxCell> it will convert into <mxcell></mxcell>.
BUT for draw.io , I need to keep the same format for XML. any way to do this ?
var apple = '<mxCell />';
var $div = $('<div>');
$div.append(apple);
$("#graphXMlDiv").text($div.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>
Working jsfiddle

Take a look to this:
let XMLTag = function(tagName) {
this.tagName = tagName;
this.children = [];
this.padding = '';
this.parent = null;
}
XMLTag.prototype.addPadding = function() {
this.padding = this.padding + '\t';
}
XMLTag.prototype.getPadding = function() {
var current = this;
let padding = '';
while (current !== null) {
padding += current.padding;
current = current.parent;
}
return padding;
}
XMLTag.prototype.setParent = function(parent) {
this.parent = parent;
}
XMLTag.prototype.append = function(child) {
child.addPadding();
child.setParent(this);
this.children.push(child);
}
XMLTag.prototype.toText = function() {
if (this.children.length === 0) {
return `${this.getPadding()}<${this.tagName}/>`;
} else {
let childrenText = this.children.map(c => c.toText()).join(`\n`);
return `${this.getPadding()}<${this.tagName}>\n${childrenText}\n${this.getPadding()}</${this.tagName}>`
}
}
var apple = new XMLTag('mxCell');
var anotherTag = new XMLTag('anotherTag');
var anotherTag1 = new XMLTag('anotherTag1');
apple.append(anotherTag);
anotherTag.append(anotherTag1);
console.log(apple.toText());

I'm not really sure what you going for so I am assuming two possible solutions.
You are looking to insert simple string instead of XML node
In that case, just do this:
var $div = $('<div/>');
$div.text('<mxCell><mxCell/>');
$("#graphXMlDiv").text($div.text());
//Then I would add the answer to this StackOverflow question
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>
Notice I don't use $div.html() to supply the data to $('#graph....') because what you've inserted inside $div is not proper HTML, and should not be treated as such.
In case you wanted to load an XML document and then add into $div the content of what the XML node myCell has, then you can do something like this.
var apple = '<mxCell>Data inside mxCell</mxCell>',
$div = $('<div/>')
$apple_xml = $($.parseXML(apple));
$apple_xml.find('mxCell').each(function() {
$div.html($(this).text());
});
$("#graphXMlDiv").text($div.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="graphXMlDiv"></div>

How can I parse HTML tags and content from a string?

For example, I have the string
'<p class="something">text goes here</p>'
I'd like to parse it out into an array of each tag and the content, ie:
['<p class="something">', 'text goes here', '</p>']

You haven't explained the use case for this, but this answer would provide the same data (organized a little differently in the array) and that data could be used to recreate the element, if needed.
var test = "<p class='something'>text goes here</p>";
// Set up an element that can contain the parsed string
var dummyElement = document.createElement("div");
// Parse/load the string into the element
dummyElement.innerHTML = test;
// Now we can extract metadata about the element and populate the array
var htmlData = [];
// Shortcut to element
var el = dummyElement.firstChild;
// Push node name into array:
htmlData.push(el.nodeName);
// Loop through attributes and put them into array:
for(var x = 0; x < el.attributes.length; x++){
htmlData.push(el.attributes[x].nodeName + "=" + el.attributes[x].nodeValue);
}
// Put element content (if it has any) into array
htmlData.push(el.textContent);
console.log(htmlData);

This isn't the better way to solve your problem, but can help you.
const elements = [
'<p id="x" required>Content X</p>',
'<p id="y" class="y">Content Y</p>',
'Google'
];
const parser = new DOMParser();
const result = elements
.map(element => parser.parseFromString(element, "text/html"))
.map(html => html.firstElementChild.children[1].children[0])
.map(child => {
const nodeName = child.nodeName.toLowerCase();
const attrs = [...child.attributes]
.map(attr => {
if (attr.value === '') {
return attr.name;
} else if (attr.value.indexOf('"') > -1) {
return `${attr.name}='${attr.value}'`;
} else {
return `${attr.name}="${attr.value}"`;
}
})
.join(' ');
return [
`<${nodeName} ${attrs}>`,
child.textContent,
`</${nodeName}>`
];
});
console.log('Result', JSON.stringify(result, null, 4));

How to add span elements within text node (document.createTextNode('...')) in JS?

I know that document.createTextNode(text) in JS is for creating text only, but is there a way to insert into it two span elements?
I have two spans created like this:
/*
* span with wrong (old) medical word
*/
// Replacement node
var span_old = $('<span />', {
'class': pluginName + '-autoword-highlight wrong wrong-medical-word-'+i
});
// If we have a new match
if (i !== c) {
c = i;
replaceElement = span_old;
}
span_old
.text(fill)
.data({
'firstElement': replaceElement,
'word': oldWord
});
/*
* span with new - corrected medical word
*
*/
// Replacement node
var span_new = $('<span />', {
'class': pluginName + '-autoword-highlight corrected-medical-word-'+i
});
// If we have a new match
if (i !== c) {
c = i;
replaceElement = span_new;
}
span_new
.text(replaceFill)
.data({
'firstElement': replaceElement,
'word': replaceFill
});
var wrong_and_corrected_medical_text = span_old[0] + span_new[0];
return document.createTextNode(wrong_and_corrected_medical_text);
Expected result is
old text - new text
and I need to return Text Node as always. Is there a hack to stringify the span elements or other way? Thanks!

Is this what you need?
var wrong_and_corrected_medical_text = span_old.text() + span_new[0].text();
Edit:
So you need the html to be returned as text, Please try this.
var wrong_and_corrected_medical_text = span_old.prop('outerHTML') + span_new.prop('outerHTML');
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML