This question already has an answer here:
Check if an HTML string only has element children (or whitespace between elements) and no element is unknown
(1 answer)
Closed 1 year ago.
I need to split a string according to the next idea:
const strin = 'test <br><span>test</span> <div>aa</div>8'.split(/<\ *>/i)
console.log(strin)
So, the expected output is next:
['test','<br>', '<span>test</span>', '<div>aa</div>', '8']
As #sebastian-simon mentioned, "split" HTML with only regular expression is impossible. The best solution is use a real HTML parser (already shipped with your browser, if you are using Node.js, you can use JSDOM).
var str = 'test <br><span>test</span> <fake></fake> <div><p>aa</p></div>8';
var container = document.createElement("div");
container.innerHTML = str; // use a HTML element to parse HTML
// If you need to work with nested tag, you should traverse childNodes and their childNodes by yourself
// childNodes included TextNode, children not.
// [...container.childNodes] convert container.childNodes to a normal array
// so we can .map over it
var elmList = [...container.childNodes];
var tags = elmList
// if elm is a TextNode, elm.outerHTML is undefined
// then we use elm.textContent instead
.map(elm => elm.outerHTML ?? elm.textContent)
.map(elm => elm.trim()) // remove whitespaces
.filter(elm => elm); // remove empty items
console.log(tags)
Trying to create DOM element "gota" from template. First I create template:
function htmlToElement(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.firstChild;
}
let gota = htmlToElement('<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>');
Second, I create collection from CSS class "gotea" and iterate for each element to append template:
function gotear() {
let gotas = document.getElementsByClassName('gotea');
for (let i = 0; i < gotas.length; i++) {
gotas[i].appendChild(gota);
}
}
gotear();
This just add "gota" element to a only one random element of the collection:
How can I add this template to ALL elements in a collection?
You're only creating one element. Then you're using that same element with appendChild multiple times, so you move it from one parent to the next.
You can clone the element with cloneNode(true) and append the clone:
gotas[i].appendChild(gota.cloneNode(true));
Side note: You can use insertAdjacentHTML rather than htmlToElement to insert elements based on that HTML directly:
function gotear() {
let gotas = document.getElementsByClassName('gotea');
for (let i = 0; i < gotas.length; i++) {
gotas[i].insertAdjacentHTML(
"beforeend",
'<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>'
);
}
}
gotear();
Granted, that means parsing the HTML repeatedly. But if not useful here, it might be useful elsewhere. (There's also insertAdjacentText.)
I'm trying to get the inner text of a header, then I would like to split the characters, then wrap each character in a span. I tried previously using insertBefore but I couldn't get it to work.
Here is my current code, which so far just logs each character.
// Title Split
const titleSplit = document.querySelectorAll('.title-split');
// Each El
Array.prototype.forEach.call(titleSplit, function(el, i) {
let innerText = el.innerText;
el.setAttribute('data-word', innerText);
const chars = innerText.split('');
Array.prototype.forEach.call(chars, function(el, i) {
console.log(el);
});
});
I specifically don't want any jQuery solutions. I'm trying to reverse learn Javascript to become more efficient. Any advise would be great. I tried putting in an insertBefore in the chars forEach but it just kept saying undefined.
document.querySelectorAll(...) return a NodeList which contains a method named .forEach(). So Instead of
Array.prototype.forEach.call(titleSplit, function(el, i) {
...
}
You can just do
titleSplit.forEach(...);
Similarly, you can just do
chars.forEach(...);
because chars is an array and you can call .forEach() method on an array.
Now coming to your question, once you have the chars array, you can use .map() method instead of .forEach(), to get a new array that contains strings where each character is wrapped by span tags.
const result = chars.map(c => `<span>${c}</span>`);
Finally, you need to iterate over the result array and insert its elements in the DOM.
result.forEach(el => document.body.append(el));
I have used document.body as the parent element of all the span elements. You can use any element that needs to be the parent element of all the span elements.
You can use map() inside the forEach() loop to construct the result with span. Also I will recommend you not to use innerText as a variable name as it is property name which can lead to some confusion:
// Title Split
const titleSplit = document.querySelectorAll('.title-split');
// Each El
Array.prototype.forEach.call(titleSplit, function(el, i) {
let ElText = el.innerText;
el.setAttribute('data-word', ElText);
const chars = ElText.split('');
var res = chars.map(function(el, i) {
return `<span>${el}</span>`;
}).join('');
el.innerHTML = res;
});
span{
border: 1px solid red;
padding: 2px;
}
<div class="title-split">Hello there</div>
const myHeader = querySelector('query my header please');
const spans = myHeader.innerText
.split('')
.map((char) => `<span>${char}</span>`)
.join('');
document.querySelector('query element to put them').innerHTML = spans;
// OR
document.querySelector('query element to put them').insertAdjacentHTML('beforeend', spans);
// etc.
I have this code that's to parse a string into html and display the text of each element.
That's working good except when I have nested tags for example <div><p>Element 1</p><p>Element 2</p></div>. In this case, the code displays <p>Element 1</p><p>Element 2</p>.
How can I do to get each tags one after the other ? (Here I want Element 1 and then Element 2)
Here's the code :
let text = new DOMParser().parseFromString(stringHtml, 'text/html');
let textBody = text.body.firstChild;
while (textBody) {
alert(textBody.innerHTML);
// other actions on the textBody element
textBody = textBody.nextSibling;
}
Thanks for helping me out
It sounds like you want a recursive function that prints the textContent of itself, or of its children, if it has children:
const stringHtml = '<div><p>Element 1</p><p>Element 2</p></div><div><p>Element 3</p><p>Element 4</p></div>';
const doc = new DOMParser().parseFromString(stringHtml, 'text/html');
const showElms = parent => {
const { children } = parent;
if (children.length) Array.prototype.forEach.call(children, showElms);
else console.log(parent.textContent);
}
showElms(doc.body);
That's assuming you want to iterate over the actual elements. If you want all text nodes instead, then recursively iterate over the childNodes instead.
I'm trying to assign class and id to items in an array I created in js and input into my html. I'm doing this so I can style them in my stylesheet. Each item will not be styled the same way.
I'm a beginner so trying to keep it to code I can understand and make it as clean as possible, i.e. not making each of these items an element in the html.
This part works fine:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
var letters = pool.join('');
document.getElementById('key').innerHTML = letters;
This part not so much:
var char1 = letters[1];
char1.classList.add('hoverRed');
There is a similar question here that didn't work for me, it just showed [object][object][object] when I ran it.
Your code attempts to apply a style to an array element, but CSS only applies to HTML. If you wish to style one character in a string, that character must be wrapped in an HTML element (a <span> is the best choice for wrapping an inline value).
This code shows how to accomplish this:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
var letters = pool.join('');
// Replace a specific character with the same character, but wrapped in a <span>
// so it can be styled
letters = letters.replace(letters[1], "<span>" + letters[1] + "</span>");
// Insert the letters string into the div
var theDiv = document.getElementById('key');
// Inject the string into the div
theDiv.innerHTML = letters;
// Get a reference to the span:
var theSpan = theDiv.querySelector("span");
// Add the style to the <span> that wraps the character, not the character itself
theSpan.classList.add('hoverRed');
.hoverRed {
color:red;
}
<div id="key"></div>
And, this snippet shows how you could apply CSS to any letter:
var pool =['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U'];
// Leave the original array alone so that it can be manipulated any way needed
// in the future, but create a new array that wraps each array element within
// a <span>. This can be accomplished in several ways, but the map() array method
// is the most straight-forward.
var charSpanArray = pool.map(function(char){
return "<span>" + char + "</span>";
});
// Decide which character(s) need CSS applied to them. This data can come from anywhere
// Here, we'll just say that the 2nd and 5th ones should.
// Loop through the new array and on the 2nd and 5th elements, apply the CSS class
charSpanArray.forEach(function(element, index, array){
// Check for the particular array elements in question
if(index === 1 || index === 4){
// Update those strings to include the CSS
array[index] = element.replace("<span>","<span class='hoverRed'>");
}
});
// Now, turn the new array into a string
var letters = charSpanArray.join('');
// For diagnostics, print the string to the console just to see what we've got
console.log(letters);
// Get a reference to the div container
var theDiv = document.getElementById('key');
// Inject the string into the div
theDiv.innerHTML = letters;
.hoverRed {
color:red;
}
<div id="key"></div>
You're on the right track, but missed one key thing.
In your example, pool contains characters. When you combine them using join, you get a string. Setting that string as the innerHTML of an element doesn't give the string super powers, it's still just a string.
In order to get a classList, you need to change your letters into elements and work with them.
I've included an es6 example (and a working plunker) of how to get the functionality you want below.
let pool = ['A','B','3','J','R','1','Q','F','5','T','0','K','N','C','R','U']
const letterToElement = function(char) {
//Create the element
let e = document.createElement("SPAN");
//Create the text node
let t = document.createTextNode(char);
//Put the text node on the element
e.appendChild(t);
//Add the class name you want
e.className += "hoverRed";
return e;
};
//create your elements from your pool and append them to the "key" element
window.onload = function() {
let container = document.getElementById("key");
pool.map(l => letterToElement(l))
.forEach(e => container.appendChild(e));
}
https://plnkr.co/edit/mBhA60aUCEGSs0t0MDGu