Develop Reference

Remove Html tags and formatting but keep anchor tag in string

I have following string variable and want to replace all html tags and formatting but wants to keep anchor tag without formatting so it remain clickable.
content = "<div>I was going here and then that happened.<p>Some Text here</p></div>";
It should be look like
content = "I was going here and then that happened. Some Text here"

Try this,
content = "<div>I was going here and then that happened.<p>Some Text here</p></div>";
var output = content.replace(/(<\/?(?:a)[^>]*>)|<[^>]+>/ig, '$1');
console.log(output);

It is not recommended to use RegEx to parse HTML
We could look into unwrap - here is one P with nothing inside
If there is something inside the P we would need to loop each tag
const content = "<div>I was going here and then that happened.<p>Some Text here</p></div>";
let $html = angular.element(content);
console.log($html.html());
const $p = $html.find("p");
$p.replaceWith($p.text());
console.log($html.html());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Any tag but A - still not handling tags wrapped in other tags - for that we would need to recursively loop out:
How do I select the innermost element?
const content = "<div>I was going here and then that happened.<p>Some Text here</p>. Here is a <span>span element1</span> some text <span>span element2</span></div>";
let $html = angular.element(content);
console.log($html.html());
const tags = $html.find("*");
for (let i=0;i<tags.length;i++) {
const $tag = angular.element(tags[i]);
const tagName = $tag[0].tagName;
if (tagName==="A") continue; // ignore A
$html.find(tagName).eq(0).replaceWith($tag.text()); // one at a time
};
console.log($html.html());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

I have used following way to remove all tags except anchor tag.
value = value.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
let html = '', addToMax = false, extraLimit = 0;
if(value && typeof value === 'string' && value.length) {
let inDelete = false;
for(let i = 0; i < value.length; i++) {
if(value.charAt(i) == '<' && value.charAt(i + 1) && value.charAt(i + 1) != 'a') {
inDelete = true;
if(value.charAt(i + 1) == '/' && ((value.charAt(i + 2) && value.charAt(i + 2) == 'a') || (value.charAt(i + 2) == ' ') && value.charAt(i + 3) && value.charAt(i + 3) == 'a')) {
inDelete = false;
}
}
if(!inDelete) {
html += value.charAt(i);
}
if(inDelete && value.charAt(i) == '>') {
inDelete = false;
}
}
}
value = angular.copy(html);

Getting variables outside a bracket and adding it into the variables inside the bracket

i am currently doing a random minterm maxterm mini program.
var totalvar = getRandomInt(3,5);
var main = "";
for (var i = 1; i <= totalvar; i++) {
var test = getRandomInt(1,4);
//alert(test);
var myArray = ["A","B","C","D","A&apos;","B&apos;","C&apos;","D&apos;"];
var text ="";
for (var a = 1; a <= test; a++) {
function random(array) {
return array[Math.floor(Math.random() * array.length)]
}
var testing = random(myArray);
if (testing =="A") {
var testing2 ="A&apos;";
} else if (testing =="A&apos;") {
var testing2 ="A";
} else if (testing =="B") {
var testing2 ="B&apos;";
} else if (testing =="B&apos;") {
var testing2 ="B";
}else if (testing =="C") {
var testing2 ="C&apos;";
} else if (testing =="C&apos;") {
var testing2 ="C";
}else if (testing =="D") {
var testing2 ="D&apos;";
} else if (testing =="D&apos;") {
var testing2 ="D";
}
//alert(testing);
//alert(myArray);
text += testing
var index = myArray.indexOf(testing);
if (index > -1) {
myArray.splice(index, 1);
}
var index = myArray.indexOf(testing2);
if (index > -1) {
myArray.splice(index, 1);
}
}
var impt = totalvar - i;
var frontbracket = main.split("(").length;
var backbracket = main.split(")").length;
if (impt >= 2) {
var brackets = getRandomInt(1,3);
var chances = getRandomInt(1,3);
var chances1 = getRandomInt(1,3);
var lastLetter = main.charAt(main.length - 1);
alert(frontbracket);
alert(backbracket);
if (frontbracket == backbracket) {
if (brackets == 1) {
text = "(" + text;
if (main == "") {
main = text;
}else
main += "+" + text;
} else {
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
}
}
else if (frontbracket != backbracket){
text = text + ")";
main += "+" + text;
}
} else if (frontbracket != backbracket){
text = text + ")";
main += "+" + text;
}
else {
var brackets = getRandomInt(1,3);
var chances = getRandomInt(1,3);
var lastLetter = main.charAt(main.length - 1);
if (brackets == 1) {
text = "(" + text + ")";
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== '1') {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
} else {
if (main == "") {
main = text;
} else if ( lastLetter == ')') {
if ( chances !== 1) {
main += text;
}else
main += "+" + text;
}else
main += "+" + text;
}
}
}
Currently i am trying to create random questions like
(ABC+C'D'A')C+C'B'
BAC'D'+(CB'A'D)(B'A)
BCA+(B'C)(A'C')
(BC'D'A+CADB')A'DC'+B'+(D'A')
(BC'D'A+CADB')+B'+(D'A')
So based on this 4 questions, i can solve qn 2, qn 3, qn 5 by using the replace function but for qn1 and qn4,
i have to check if there is a plus sign inside the bracket and if there are variables outside the bracket, i will need to add the variables inside.
If there are no variables outside of the bracket like Qn5, i will just remove the brackets.
like this qn5
BC'D'A+CADB'+B'+D'A'
For example qn4 should look like this after the function is done with it
BC'D'AA'DC'+CADB'A'DC'+B'+D'A'
May i ask for some advice regarding this please?
on a function that checks whether there is a plus sign inside the bracket then check whether there are any variables directly outside the bracket and if there is, the variable outside must be added to the variables inside the bracket

javascript get element unique selector

I am moving elements using javascript and I need to create a logic for the combinations happening during the drag/drops
I'm trying to get details from the elements, a CSS like selector could be also good, but dunno if it is possible.. (like copy-selector in chrome dev tools)
document.onmouseup = function(e){
targetDest = e.target;
//console.log('targetDest: ', targetDest);
let
indexA = Array.from(targetCurr.parentNode.children).indexOf(targetCurr),
indexB = Array.from(targetDest.parentNode.children).indexOf(targetDest);
console.log(indexA, indexB);
if(targetDest != targetCurr){
if(targetDest == document.documentElement){
console.log('document');
}
else if(targetDest == undefined){
console.log('undefined');
}
else if(!targetDest){
console.log('!dest');
}
else if(targetDest == null){
console.log('null');
}
else if(targetDest == false){
console.log('false');
}
else{
console.log('else');
//targetCurr.parentNode.insertBefore(targetDest, targetCurr);
//console.log('...');
}
}else{
console.log('itself');
}
}

Keep in mind that this will not necessarily uniquely identify elements. But, you can construct that type of selector by traversing upwards from the node and prepending the element you're at. You could potentially do something like this
var generateQuerySelector = function(el) {
if (el.tagName.toLowerCase() == "html")
return "HTML";
var str = el.tagName;
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.split(/\s/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
return generateQuerySelector(el.parentNode) + " > " + str;
}
var qStr = generateQuerySelector(document.querySelector("div.moo"));
alert(qStr);
body
<div class="outer">
div.outer
<div class="inner" id="foo">
div#foo.inner
<div class="moo man">
div.moo.man
</div>
</div>
</div>
I wouldn't suggest using this for much besides presenting the information to a user. Splitting it up and reusing parts are bound to cause problems.

My solution using :nth-child:
function getSelector(elm)
{
if (elm.tagName === "BODY") return "BODY";
const names = [];
while (elm.parentElement && elm.tagName !== "BODY") {
if (elm.id) {
names.unshift("#" + elm.getAttribute("id")); // getAttribute, because `elm.id` could also return a child element with name "id"
break; // Because ID should be unique, no more is needed. Remove the break, if you always want a full path.
} else {
let c = 1, e = elm;
for (; e.previousElementSibling; e = e.previousElementSibling, c++) ;
names.unshift(elm.tagName + ":nth-child(" + c + ")");
}
elm = elm.parentElement;
}
return names.join(">");
}
var qStr = getSelector(document.querySelector("div.moo"));
alert(qStr);
body
<div class="outer">
div.outer
<div class="inner" id="foo">
div#foo.inner
<div class="moo man">
div.moo.man
</div>
</div>
</div>
Please note it won't return the whole path if there's an element with ID in it - every ID should be unique on the page, as valid HTML requires.
I use output of this function in document.querySelector later in the code, because I needed to return focus to the same element after replaceChild of its parent element.
I hope CollinD won't mind I borrowed his markup for the code snippet :-)

I mixed the 2 solutions proposed to have a result readable by humans and which gives the right element if there are several similar siblings:
function elemToSelector(elem) {
const {
tagName,
id,
className,
parentNode
} = elem;
if (tagName === 'HTML') return 'HTML';
let str = tagName;
str += (id !== '') ? `#${id}` : '';
if (className) {
const classes = className.split(/\s/);
for (let i = 0; i < classes.length; i++) {
str += `.${classes[i]}`;
}
}
let childIndex = 1;
for (let e = elem; e.previousElementSibling; e = e.previousElementSibling) {
childIndex += 1;
}
str += `:nth-child(${childIndex})`;
return `${elemToSelector(parentNode)} > ${str}`;
}
Test with:
// Select an element in Elements tab of your navigator Devtools, or replace $0
document.querySelector(elemToSelector($0)) === $0 &&
document.querySelectorAll(elemToSelector($0)).length === 1
Which might give you something like, it's a bit longer but it's readable and it always works:
HTML > BODY:nth-child(2) > DIV.container:nth-child(2) > DIV.row:nth-child(2) > DIV.col-md-4:nth-child(2) > DIV.sidebar:nth-child(1) > DIV.sidebar-wrapper:nth-child(2) > DIV.my-4:nth-child(1) > H4:nth-child(3)
Edit: I just found the package unique-selector

Small improvement of the #CollinD answer :
1/ Return value when the selector is unique
2/ Trim classes value (classes with end blanks make errors)
3/ Split multiple spaces between classes
var getSelector = function(el) {
if (el.tagName.toLowerCase() == "html")
return "html";
var str = el.tagName.toLowerCase();
str += (el.id != "") ? "#" + el.id : "";
if (el.className) {
var classes = el.className.trim().split(/\s+/);
for (var i = 0; i < classes.length; i++) {
str += "." + classes[i]
}
}
if(document.querySelectorAll(str).length==1) return str;
return getSelector(el.parentNode) + " > " + str;
}

Based on previous solutions, I made a typescript solution with a shorter selector and additional checks.
function elemToSelector(elem: HTMLElement): string {
const {
tagName,
id,
className,
parentElement
} = elem;
let str = '';
if (id !== '' && id.match(/^[a-z].*/)) {
str += `#${id}`;
return str;
}
str = tagName;
if (className) {
str += '.' + className.replace(/(^\s)/gm, '').replace(/(\s{2,})/gm, ' ')
.split(/\s/).join('.');
}
const needNthPart = (el: HTMLElement): boolean => {
let sib = el.previousElementSibling;
if (!el.className) {
return true;
}
while (sib) {
if (el.className !== sib.className) {
return false;
}
sib = sib.previousElementSibling;
}
return false;
}
const getNthPart = (el: HTMLElement): string => {
let childIndex = 1;
let sib = el.previousElementSibling;
while (sib) {
childIndex++;
sib = sib.previousElementSibling;
}
return `:nth-child(${childIndex})`;
}
if (needNthPart(elem)) {
str += getNthPart(elem);
}
if (!parentElement) {
return str;
}
return `${elemToSelector(parentElement)} > ${str}`;
}

syntax highlighting design

I'm writing my own syntax highlighter in javascript for fun and see a couple of approaches but they both have pros and some pretty serious cons that I can't get around. What do you guys think about these approaches and are there better methods that I'm missing?
Assumption
Code to highlight exists in a single string.
Approaches
Treat code in it's string form and use regular expressions to find patterns.
Pros
Simple to define and search for patterns
Cons
Hard to disregard keywords inside of quotes or comments
Split the string by spaces and linebreaks and loop over the array.
Pros
Easy to keep track of scope
Cons
Hard to keep track of spaces and linebreaks after the split
EDIT: Lexical Analysis
So, if I understand it, using Lexical Analysis you break the string into tokens. This somehow sounds a lot like approach number 2? How do you approach reassembling the tokens into the original string?

Note: This uses jQuery. It can pretty well be rewritten to work with straight javascript if you want.
I actually wrote a little plugin for fun that does this:
(function($) {
$.fn.codeBlock = function(blockComment) {
// Setup keyword regex
var keywords = /(abstract|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|export|extends|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|try|typeof|var|void|volatile|while|with|true|false|prototype)(?!\w|=)/gi;
// Booleans to toggle comment, regex, quote exclusions
var comment = false;
var quote = false;
var regex = false;
/* Array used to store values of regular expressions, quotes, etc.
so they can be used to ID locations to be skipped durring keyword
regexing.
*/
var locator = new Array();
var locatorIndex = 0;
if (blockComment) locator[locatorIndex++] = 0;
var text = $(this).html();
var continuation;
var numerals = /[0-9]/;
var arr = ($(this).html()).split("");
var outhtml = "";
for (key in arr) {
// Assign three variables common 'lookup' values for faster aquisition
var keyd = key;
var val = arr[keyd];
var nVal = arr[keyd - 1];
var pVal = arr[++keyd];
if ((val == "\"" || val == "'") && nVal != "\\") {
if (quote == false) {
quote = true;
outhtml += val;
}
else {
outhtml += val;
quote = false;
}
locator[locatorIndex++] = parseInt(key);
}
else if (numerals.test(val) && quote == false && blockComment == false && regex == false) {
outhtml += '<span class="num">' + val + '</span>';
}
else if (val == "/" && nVal != "<") {
var keys = key;
if (pVal == "/") {
comment = true;
continuation = key;
break;
}
else if (pVal == "*") {
outhtml += "/";
blockComment = true;
locator[locatorIndex++] = parseInt(key);
}
else if (nVal == "*") {
outhtml += "/";
blockComment = false;
locator[locatorIndex++] = parseInt(key);
}
else if (pVal == "[" && regex == false) {
outhtml += "<span class='res'>/";
regex = true;
}
else {
outhtml += "/";
}
}
else if (val == "," || val == ";" && regex == true) {
outhtml += "</span>" + val;
regex = false;
}
else {
outhtml += val;
}
}
if (comment == true) {
outhtml = outhtml.replace(keywords, "<span class='res'>$1</span>");
outhtml += '<span class="com">';
outhtml += text.substring(continuation, text.length);
outhtml += '</span>';
}
else {
if ((locator.length % 2) != 0) locator[locator.length] = (text.length - 1);
if (locator.length != 0) {
text = outhtml;
outhtml = text.substring(0, locator[0]).replace(keywords, "<span class=\"res\">$1</span>");
for (var i = 0; i < locator.length;) {
qTest = text.substring(locator[i], locator[i] + 1);
if (qTest == "'" || qTest == "\"") outhtml += "<span class=\"quo\">";
else outhtml += "<span class=\"com\">";
outhtml += text.substring(locator[i], locator[++i] + 1) + "</span>";
outhtml += text.substring(locator[i] + 1, locator[++i]).replace(keywords, "<span class=\"res\">$1</span>");
}
}
else {
outhtml = outhtml.replace(keywords, "<span class=\"res\">$1</span>");
}
}
text = outhtml;
$(this).html(text);
return blockComment;
}
})(jQuery);
I'm not going to claim it is the most efficient way of doing this or the best but it does work. There are still probably a few bugs in there I haven't ID'd yet (and 1 I know about but haven't gotten around to fixing) but this should give you an idea of how you could go about this if you like.
My suggested implementation of this is to create a textarea or something and have the plugin run when you click a button or something (as far as testing it goes that is a decent idea) and of course you can set the text in the textarea to some starting code to make sure it works (Tip: You can put tags in between the the <textarea> tag and it will render as text, not HTML).
Also, blockComment is a boolean, make sure to pass false because true will trigger the block quoting. If you decided to parse something line by line, like:
<a>code</a>
<a>some more code</a>
Do something like:
blockComment = false;
$("a").each(function() {
blockComment = $(this).codeBlock(blockComment);
});

Changing link color based on stylesheet function

I am a novice JavaScript programmer; any help would be greatly appreciated.
I have successfully implemented a script that allows users to switch from a "regular view" to a "high contrast view". The script is simply changing stylesheets.
I have also set up the script with a basic toggle: when a user clicks "High Contrast View" the link text changes to "Back".
However, I need to modify how the toggle works: rather than changing the link text, I need to change the link color.
I know that I can create a function with .style.color, but I am not sure how to integrate this in to my current script.
JavaScript:
function load_all() {
var cssval;
cssval = get_cookie("cssclass");
if (cssval == null || (cssval != "Normal CSS" && cssval != "High-Contrast-View")) {
cssval = "Normal CSS";
}
set_stylesheet(cssval);
}
function switchStyle(newtitle) {
set_stylesheet(newtitle);
finish_stylesheet();
}
function set_stylesheet(newtitle) {
var csslink;
if (newtitle == null) {
if (get_stylesheet() == "Normal CSS") newtitle = "High-Contrast-View";
else newtitle = "Normal CSS";
}
for (var i = 0; (csslink = document.getElementsByTagName("link")[i]); i++) {
if (csslink.getAttribute("rel").indexOf("style") != -1 && csslink.getAttribute("title")) {
csslink.disabled = true;
if (csslink.getAttribute("title") == newtitle)
csslink.disabled = false;
}
}
set_cookie("cssclass", newtitle, 28);
}
function finish_stylesheet() {
var nojsanchor, nojsspan, newtitle;
newtitle = get_stylesheet();
nojsanchor = document.getElementById("footer_nojslink");
nojsspan = document.getElementById("contrastToggle");
if (nojsanchor != null && nojsspan != null) {
while (nojsspan.hasChildNodes())
nojsspan.removeChild(nojsspan.childNodes[0]);
nojsspan.appendChild(document.createTextNode(newtitle == "Normal CSS" ? "high contrast" : "back"));
nojsanchor.href = "javascript:switchStyle('" + (newtitle == "Normal CSS" ? "High-Contrast-View" : "Normal CSS") + "')";
}
}
function get_stylesheet() {
var i, a;
for (i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)
return a.getAttribute("title");
}
return null;
}
function accepts_cookies() {
document.cookie = "cookiecheck=true; path=/";
var cookies = document.cookie;
if (cookies.indexOf("cookiecheck") >= 0)
return true;
else
return false;
}
function set_cookie(name, value, days) {
var expire;
if (days > 0) {
expire = new Date();
expire.setDate(expire.getDate() + days);
}
else
expire = null;
document.cookie = name + "=" + escape(value) + (expire == null ? "" : ";expires=" + expire.toGMTString()) + ";path=/";
}
function get_cookie(name) {
var cookielist, cookie;
cookielist = document.cookie.split(";");
for (var i = 0; i < cookielist.length; i++) {
cookie = cookielist[i];
while (cookie.charAt(0) == " ")
cookie = cookie.substring(1);
if (cookie.indexOf(name + "=") == 0)
return unescape(cookie.substring(name.length + 1));
}
return null;
}

With your current code you should be able to do this:
document.getElementById("footer_nojslink").style.color = "#A6A6A6";
If you find yourself doing this kind of task frequently it's going to be worth your time to learn jQuery. It can sometimes make things simpler, and takes away most cross browser headaches. Here is a jQuery example for the specific example you are asking, changing link color;
$('#footer_nojslink').css('color','#A6A6A6');

easy
import the two (or more) stylesheets...
<head>
<link rel="stylesheet" href="style_1.css">
<link rel="stylesheet" href="style_2.css">
</head>
and then enable/disable them this way:
<script>
document.styleSheets[0].disabled=true;
document.styleSheets[1].enabled=true;
</script>
Now you can change the entire style of your site, not only the links.
https://developer.mozilla.org/En/DOM/Document.styleSheets