Develop Reference

What is the simplest method to parse HTML, strip scripts and return serialized HTML using jQuery?

This is my best attempt, but it is more complex than I expected it to be.
export function removeScripts(serializedSvg: string): string {
const doc = $.parseHTML(serializedSvg);
const newSerialized = doc.reduce((str, el) => {
return $(el).prop("outerHTML") as string;
}, "");
return newSerialized;
}
Are there perhaps other exposed methods that allow me to achieve the same end goal without having to loop over an array?

Your current code doesn't seem overly complex to me (other than that $(el).prop("outerHTML") is a long way to write el.outerHTML). But it also doesn't seem to strip out script elements.
This code should, see comments:
export function removeScripts(serializedSvg: string): string {
// Create a wrapper for the parsed content
const div = $("<div/>");
// Parse it and put it in the wrapper
div.append($.parseHTML(serializedSvg));
// Remove scripts
div.find("script").remove();
// Return the result
return div.innerHTML;
}

Replace particular file content in nodejs

I want to replace a particular line using javascript with new content.
This is the file content,
SERVER=1055#localhost
GROUP_SERVERS=2325#localhost
LINE_IAM_INTERESTED=KTYUIERVW:2800
FILE_PATH="C:\Program Files\somefile\Shared Files\"
In this line, LINE_IAM_INTERESTED=KTYUIERVW:2800 .I want to replace KTYUIERVW with KJHTERDY and 2800 with 78945
I have shown what I tried using fs appendfilesync
fs.appendFileSync('file_name').toString().split('\n').forEach(function(line){
app.console.log("called append");
var sEntry = line.split("=");
if (sEntry.length == 2) {
if (sEntry[0] == "LINE_IAM_INTERESTED") {
app.console.log("found one!!!!");
}
}
});

you can try READ -> REPLACE -> WRITE flow:
fs.writeFileSync('file_name', fs.readFileSync('file_name').replace('KTYUIERVW:2800', 'KJHTERDY:78945'))

appendFile and appendFileSync are used for adding to the end of the file. Although you can do it as a one liner as shown in the other answer, I've kept the structure of your code the same. Here you want to read the data, modify it then re-write it. Using the block of code you have, you can modify it to use readFileSync and writeFileSync.
let newData = fs.readFileSync('file_name', 'utf-8').split('\n').map(line => {
let sEntry = line.split('=')
if (sEntry.length == 2) {
if (sEntry[0] == "LINE_IAM_INTERESTED") {
console.log("found one!!!!");
return sEntry[0] + '=' + 'KJHTERDY:78945'
}
}
return line
}).join('\n')
fs.writeFileSync('file_name', newData)
I've swapped the forEach for map which lets us change the array data by returning the desired value. The new array is then joined back together and written back to the file.

How can I create a dynamically interpolated string in javascript?

I'm working on creating a reusable UI component and am trying to figure out how to allow the consumer of the component to provide their own template for a particular area of the component.
I'm using typescript and am trying to utilize string interpolation to accomplish this as it seemed the most appropriate course of action.
Here is what I have so far:
export class Pager {
pageNumber: number = 1;
getButtonHtml(buttonContentTemplate?: string, isDisabled?: boolean): string {
buttonContentTemlpate = buttonContentTemplate || '${this.pageNumber}';
isDisabled = isDisabled || false;
return `<button id="button-id" type="button" ${!isDisabled ? '' : disabledAttribute}>
${buttonContentTemplate}
</button>`;
}
}
I have some other methods that will update the page number based off user input/interaction, but I want it to work that when getButtonHtml gets called, the return value would be <button id="button-id" type="button">1</button>, but instead I'm getting <button id="button-id" type="button">${this.pageNumber}</button>.
Is there a way to get javascript to evaluate the string again, and interpolate the remaining place holders?
I've looked at the MDN article on this topic and think that the String.raw method might possibly be what I need to use, but I wasn't sure and no matter what I try, I haven't gotten it to work.
Any help would be greatly appreciated.

The problem is that Template literals are interpreted immediately.
What you want to do is lazy load the template. So it would be best to pass in a function that returns a string.
export class Pager {
pageNumber: number = 1;
getButtonHtml(template?: () => string, isDisabled=false): string {
template = template || function() { return this.pageNumber.toString() };
return `<button id="button-id" type="button" ${!isDisabled ? '' : disabledAttribute}>
${template()}
</button>`;
}
}
Additionally, you can take advantage of default parameters to avoid the || trick.

Consolidate nested, overlapping <strong> and <em> tags

I have a string of text that I am storing mark-up for separately. For example:
var content = {
text: "a little white rabbit hops",
style: [
{
type: "strong",
start: 0,
length: 8
},
{
type: "em",
start: 2,
length: 14
}
]
}
I am then parsing that into html, but the em tag has to be opened and closed twice to be properly formatted:
<strong>a <em>little</em></strong><em> white</em> rabbit hops
My question is: what is the best way to parse the html retrieved from the DOM to consolidate the separated em tags (or conceivably the strong tags: in my scenario either could be nested).
If I iterate over a NodeList of children (p.getElementsByTagName('em')) I would have to do multiple for loops and check the start/length of all nested tags. There has got to be an easier way, but I haven't thought of one - is there a library out there that handles this kind of formatting (or a way to to do this directly via the DOM)?
I am not using jQuery and don't want to add it to my project just for this. Any help is much appreciated!
---EDIT---
To clarify the question: this is essentially about translating the formatting into/out of the HTML, the issue is the best way to handle the tag nesting: i.e. even though there are two em child tags, there is really only one em formatted block (the end/start of em child tag 1 and 2 are contiguous)

Here are two functions for the conversion in either direction.
First the one that converts an HTML string to the content structure you described:
function htmlToContent(html) {
// The object to fill and return:
var content = {
text: '',
style: []
};
// Keep track of recently closed tags (i.e. without text following them as of yet)
var closedStyles = [];
// Recursive function
function parseNode(elem) {
var style;
if (elem.nodeType === 3) {
// This is a text node (no children)
content.text += elem.nodeValue;
// Any styles that were closed should be added to the content
// style array, as they cannot be "extended" any more
[].push.apply(content.style, closedStyles);
closedStyles = [];
} else {
// See if we can extend a style that was closed
if (!closedStyles.some(function (closedStyle, idx) {
if (closedStyle.type === elem.nodeName) {
style = closedStyle;
// Style will be extended, so it's no longer closed
closedStyles.splice(idx, 1);
return true; // exit ".some"
}
})) {
// No style could be extended, so we create a new one
style = {
type: elem.nodeName,
start: content.text.length,
length: 0
};
}
// Recurse into the child nodes:
[].forEach.call(elem.childNodes, function(child) {
parseNode(child);
});
// set style length and store it as a closed one
style.length = content.text.length - style.start;
closedStyles.push(style);
}
}
// Create a node with this html
wrapper = document.createElement('p');
wrapper.innerHTML = html;
parseNode(wrapper);
// Flush remaining styles to the result
closedStyles.pop(); // Discard wrapper
[].push.apply(content.style, closedStyles);
return content;
}
This function first injects the HTML string into a DOM wrapper element, and then recurses into the node hierarchy to build the content structure. The main idea in this code is that it first collects closed nodes in a temporary closedStyles array. Only when it becomes certain that these cannot be used anymore for a merge with an upcoming node, they are added to the content structure. This happens when a text node is encoutered. If however tags close and open again without intermediate text, the matching style is located and extracted from this closedStyles array, and reused for extension.
The function that does the opposite could be defined as follows:
function contentToHtml(content) {
var tags = [];
// Build list of opening and closing tags with the offset of injection
content.style.forEach(function (tag) {
tags.push({
html: '<' + tag.type + '>',
offset: tag.start
}, {
html: '</' + tag.type + '>',
offset: tag.start + tag.length
});
});
// Sort this list by decreasing offset:
tags.sort(function(a, b) {
return b.offset - a.offset;
});
var html = '';
var text = content.text;
// Insert opening and closing tags from end to start in text
tags.forEach(function (tag) {
// Prefix the html with the open/close tag and the escaped text that follows it
html = tag.html + textToHtml(text.substr(tag.offset)) + html;
// Reduce the text to the part that still needs to be processed
text = text.substr(0, tag.offset);
});
// Remaining text:
html = textToHtml(text) + html;
// Create a node with this html, in order to get valid html tag sequences
p = document.createElement('p');
p.innerHTML = html;
// p.innerHTML will change here if html was not valid.
return p.innerHTML;
}
This function first translates each of the styles to two objects, one representing the opening tag, and the other the closing tag. These tags are then inserted into the text at the right position (from then of the text to the beginning). Finally the trick you described yourself is applied: the resulting html is put in a dom object and taken out of it again. This way any invalid HTML tag sequence is fixed.
The function uses the textToHtml utility function, which could be defined as follows:
function textToHtml(text) {
// See http://www.w3.org/International/questions/qa-escapes#use
return text.replace('&', '&').replace('<', '<').replace('>', '>');
}
You can see it work in this fiddle, where an example HTML string is used that also includes nested tags of the same type. These are maintained.

Prettify json data in textarea input

I've searched for this particular topic and couldn't find anything similar to it. If there is please close this and give a link.
I'm creating a json data api simulator. I want users to be able to copy and paste a json object request into a textarea where they can also modify it before sending it to the server.
Problem is json obj copy and patses often results in extra spaces and is never aligned properly, even with the pre tag. I also want a good color scheme applied to keys and values.
I've seen plugins, other questions and snippets of code, but they don't apply to textareas where the text is editable. Is there to keep it styled while in edit mode without it showing all the html tags that styled it? I want to be able to write it from scratch with javascript or jquery.

The syntax highlighting is tough but check out this fiddle for pretty printing a json object entered in a text area. Do note that the JSON has to be valid for this to work. (Use the dev console to catch errors.) Check jsLint for valid json.
The HTML:
<textarea id="myTextArea" cols=50 rows=10></textarea>
<button onclick="prettyPrint()">Pretty Print</button>
The js:
function prettyPrint() {
var ugly = document.getElementById('myTextArea').value;
var obj = JSON.parse(ugly);
var pretty = JSON.stringify(obj, undefined, 4);
document.getElementById('myTextArea').value = pretty;
}
First try simple input like: {"a":"hello","b":123}
Simple pretty printing of JSON can be done rather easily. Try this js code: (jsFiddle here)
// arbitrary js object:
var myJsObj = {a:'foo', 'b':'bar', c:[false,2,null, 'null']};
// using JSON.stringify pretty print capability:
var str = JSON.stringify(myJsObj, undefined, 4);
// display pretty printed object in text area:
document.getElementById('myTextArea').innerHTML = str;
For this HTML:
<textarea id="myTextArea" cols=50 rows=25></textarea>
And check out JSON.stringify documentation.

Late answer but modern one, use the secret intendation parameter.
I usually go for:
JSON.stringify(myData, null, 4);
Here's the code definition, it explains it well.
stringify(value: any, replacer?: (this: any, key: string, value: any) => any, space?: string | number): string;
/**
* Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
* #param value A JavaScript value, usually an object or array, to be converted.
* #param replacer An array of strings and numbers that acts as a approved list for selecting the object properties that will be stringified.
* #param space Adds indentation, white space, and line break characters to the return-value JSON text to make it easier to read.
*/

For the parsing step you're just going to want to JSON.parse the contents of the textarea and handle any errors from bad input.
For the formatting part of your question, Use JSON.stringify(blob, undefined, 2). Alternatively, if you need colors here is a simple JSON format/color component written in React:
const HighlightedJSON = ({ json }: Object) => {
const highlightedJSON = jsonObj =>
Object.keys(jsonObj).map(key => {
const value = jsonObj[key];
let valueType = typeof value;
const isSimpleValue =
["string", "number", "boolean"].includes(valueType) || !value;
if (isSimpleValue && valueType === "object") {
valueType = "null";
}
return (
<div key={key} className="line">
<span className="key">{key}:</span>
{isSimpleValue ? (
<span className={valueType}>{`${value}`}</span>
) : (
highlightedJSON(value)
)}
</div>
);
});
return <div className="json">{highlightedJSON(json)}</div>;
};
See it working in this CodePen:
https://codepen.io/benshope/pen/BxVpjo
Hope that helps!

If you are a jquery fan, you can also use this small plugin I wrote:
// The plugin
$.fn.json_beautify= function() {
this.each(function(){
var el = $(this),
obj = JSON.parse(el.val()),
pretty = JSON.stringify(obj, undefined, 4);
el.val(pretty);
});
};
// Then use it like this on any textarea
$('textarea').json_beautify();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="myTextArea" cols=50 rows=5>{"name":"John","age":30}</textarea>
<textarea id="myTextArea2" cols=50 rows=5>{"name":"Bob","age":55}</textarea>
UPD
Changed code to multiselected elements.

I don't think that can be done with regular textareas. What you can do (and how most online code editors do it) is to create a transparent textarea that overlays on top of a div that contains the styled code. The user would still be able to type and interact with the input (and it fires the associated form events), and you can show syntax highlighting in the div that the user will visually see
(see Textarea that can do syntax highlighting on the fly?)
Now as for JSON formatting, I would add custom events to the textarea so that when a user types or paste something, run it through a Javascript JSON prettifier (see How can I pretty-print JSON using JavaScript?) and then re-populate the div and textarea accordingly

Here's a recursive function to return an object if it has been stringified multiple times:
const jsonPrettify = (json) => {
if (typeof json === 'object' && json !== null) {
const pretty = JSON.stringify(json, undefined, 4);
return pretty;
}
try {
const obj = JSON.parse(json);
return jsonPrettify(obj);
} catch (e) {
return json;
}
};