I would like to use javascript.
Before the br I have text too, which changes. It can be 4/20, or 10/20 etc.
var questionString = document.getElementsByClassName("question")[0].innerText;
console.log(questionString)
<DIV class="question">1/20
<BR>THIS IS A QUESTION?</DIV>
Here is your question.
var questionString = document.getElementsByClassName("question")[0].innerHTML.split('<br>')[1];
console.log(questionString)
<DIV class="question">1/20<BR>THIS IS A QUESTION?</DIV>
If you want the questions after the BR, try this:
let qs = [];
document.querySelectorAll(".question").forEach((d) =>
qs.push(d.innerText.replace(/\d{1,}\/\d{1,}\s+/, ""))
)
console.log(qs)
<DIV class="question">1/20
<BR>THIS IS QUESTION 1 of 20</DIV>
<DIV class="question">2/20
<BR>THIS IS QUESTION 2 of 20</DIV>
By 4/20 you mean the current question is the 4th question among a total of 20 questions, right?
I believe that your requirement is when the user click next button, you want the text "4/20" to change into "5/20".
// have a reference to the question text's DOM
var question_no_dom = document.getElementById("question_no");
var question_dom = document.getElementById("question");
// list of questions
var questions = ["1. How tall is mount everest?",
"2. What is the capital city of Russia?",
"3. How far way is the sun from the earth?"];
// start with the first question
var current_quest_no = 0;
var total_no_quest = 3
question_no_dom.innerText = (current_quest_no+1)+'/'+total_no_quest;
question_dom.innerText = questions[current_quest_no];
function onNext() {
if(current_quest_no < total_no_quest-1) {
current_quest_no++;
question_no_dom.innerText = (current_quest_no+1)+'/'+total_no_quest;
question_dom.innerText = questions[current_quest_no];
}
}
<div id="question_no"></div><br>
<div id="question"></div><br>
<button onclick="onNext()">Next ></button>
Grab the first child node of the div (which given your html will always be your desired text node) then trim it to remove the extra spacing and newline.
var questionString = document.getElementsByClassName("question")[0].childNodes[0].textContent.trim()
console.log(questionString)
<DIV class="question">1/20
<BR>THIS IS A QUESTION?</DIV>
Related
Basically, I want to filter a list so it only shows items containing BOTH keywords inside the array.
Ex.:
searchArray = ['sys', 'config']
If the user type 'sys config', should only show "System configuration" and hide other items.
So far I came up with this, but it's not working properly, cause it shows items that contains one of the words and not both.
var searchArray = search.split(" ");
for(x in searchArray){
filteredMenu = $('.texto:contains(\'' + searchArray[x] + '\')')
}
Check that .every one of the keywords is included:
const texts = [...$('.texto')]
.filter(element => searchArray.every(
substr => element.textContent.includes(substr)
));
Demo:
searchArray = ['sys', 'config']
const texts = [...$('.texto')]
.filter(element => searchArray.every(
substr => element.textContent.includes(substr)
));
for (const text of texts) {
console.log(text);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="texto">
foo
</div>
<div class="texto">
config
</div>
<div class="texto">
sys config
</div>
<div class="texto">
system configuration
</div>
<div class="texto">
sys
</div>
<div class="texto">
bar
</div>
Also, in some cases it is useful to construct a regular expression ("regex") string, and to use this to perform the search.
I used the solution posted by a guy in Brazillian SO. Adding multiple :contains seems to work perfectly. Also, the answer from CertainPerformance works great!
var arrayBusca = ["config", "empresa"];
var stringBusca = '';
arrayBusca.forEach((item) => stringBusca = stringBusca.concat(`:contains("${item}")`));
console.log(stringBusca); // output: :contains("config"):contains("empresa")
let samplestring ="a:b;c:d;e:f"
this.detail = samplestring.split(";").join("\n");
<div fxLayout="row">
<span class="default_label_font">{{detail}}</span>
</div>
but not adding new line and giving response like
response sample i'm getting
I've tried using "" too but instead of adding break it concatenate it
I refer Split string with commas to new line
Another way to do it, I think much simpler, is to use [innerHtml] (docs) instead of interpolation and break lines with <br>.
Like this:
<div fxLayout="row">
<span class="default_label_font" [innerHtml]="detail"></span>
</div>
let samplestring = "a:b;c:d;e:f";
this.detail = samplestring.split(";").join("<br>");
StackBlitz for you to test and play.
If you need to print the text on separate lines you will have to add <br> inbetween. \n is not rendered by HTML, unless you use <pre>.
extract from component.ts
this.lines = samplestring.split(";");
extract from component.html
<ng-container *ngFor="let line of lines; i = index">
<br *ngIf="i != 0">{{line}}
</ng-container>
Issue is the element you are using to set. Span is a inline component. So line breaks will not work. You will have to use a block level element like Div
let samplestring = "a:b;c:d;e:f"
const detail = samplestring.split(";").join("\n");
document.querySelector('.default_label_font').innerText = detail;
<div fxLayout="row">
<div class="default_label_font"></div>
</div>
HTML
<h1 id="ovde">
...
</h1>
ts
let customItems = "1,2,3";
customItems = customItems.split(',');
for ( let i = 0; i < customItems.length; i++ )
customItems[i] = "- " + customItems[i] + "\n";
customItems = customItems.join('');
document.getElementById("ovde").innerHTML = customItems;
I am being able to provide option's in the menu bar but when I click on any of the option it's working absolutely fine,but if I tried to select twice it is changing at all places.
For Ex.
I want to make a ordered list such as:
1.Some Text here
a.option 1 b.option 2
c.option 3 d.option 4.
When I am trying to select some text its also converting 1 to A.
Please help.Thanks in advance
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ol > li').css({'list-style-type':selectedStyle});
You can ignore the counter part its not required.I was trying to put id at every element and use jquery to update only that part.
let counter = 0;
document.querySelectorAll (".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ul > li').css({'list-style-type':selectedStyle});
}
HTML
<div class="order-list-select" id="orderList" draggable="true">
<div>
<span class="jodit_popup_triangle"></span>
<div class="math-toolbar-top" id="orderlistHeader"></div>
<div class="order-list-main">
<div class="order-list-container"></div>
<div class="order-container">
<ol class="upper-roman">
<li><hr></li>
</ol>
<ol class="decimal">
<li><hr></li>
</ol>
</div>
</div>
</div>
</div>
Actual
1.text
2.text
Some text here
1.Txt
2.Txt
Expected
1.text
2.text
Some text here
a.Txt
b.Txt
I did it by Jquery don't know if its right approach but it has made me achieve my task.
Below is the code for my this.
document.querySelectorAll(".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
let select = window.getSelection().focusNode.parentElement.parentElement;
let ul_id = ""
$(select).attr('id', function(i) {
ul_id = "unorder"+(counter);
return ul_id;
});
if(selectedStyle == "right-arrow"){
$('#'+ul_id).css({'list-style-image':`url('icons/list-right-editor.svg')`});
}else if(selectedStyle == "open-square"){
$('#'+ul_id).css({'list-style-image':`url('icons/square-open-editor.svg')`});
}else{
$('ul').attr('type',function(){
return selectedStyle;
})
$('#'+ul_id).css({'list-style-type':selectedStyle});
}
document.querySelector(".unorder-list-select").remove();
})
});
Please change the classess accordingly to get the tag and click.
Hi guys I am quite new in javascript,
I am using a chart.js chart that update itself based on a dropdown button.
I would like to update as well another div called explanation that give comment on the chart.
gogo is a an object that list explantation id. log.console(gogo) may output [15, 16] or [15, 16, 17, 18].
I would need for each explanation id create a new div within the explanation div
I tried :
$(".pick-chart").change(function(e) {
e.preventDefault();
var val = $(this).val();
if (val != 0) {
info_process.data.datasets[1].data = info_array[val];
info_process.update();
stringval = JSON.stringify(val)
gogo = opposed_model[val]
for(var x = 0; x < gogo.length; x++){
$("#explanation").append("<b>gogo[x]</b>");
}
document.getElementById('explanation').innerHTML = gogo;
} else {
info_process.data.datasets[1].data = [];
document.getElementById('explanation').innerHTML = "";
}
info_process.update();
});
HTML:
<div class="col">
<div class="card box-shad">
<h5 class="card-header text-center bg-dark text-white">Action</h5>
<div class="card-body">
Text - Test
<div id="explanation">
</div>
</div>
</div>
</div>
I do not manage to make it work, any idea ?
Couple of issues you have:
Instead of $("#explanation").append("<b>gogo[x]</b>"); do $("#explanation").append("<b>"+gogo[x]+"</b>");. Note the way string concatenation is happening.
Remove document.getElementById('explanation').innerHTML = gogo; this will overwrite the html of #explanation.
I am creating ListView using my template:
HTML:
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="ItemTemplate">
<div class="back"></div>
<div data-win-bind="innerText:Info.shortName" class="shortName"></div>
<div data-win-bind="innerText:value Converters.BeginValue" class="value"></div>
<div data-win-bind="innerText:value Converters.EndValue" class="valueEnd"></div>
<div data-win-bind="innerText:Info.longName"></div>
<img data-win-bind="src:Info.flag" class="flag" />
<div data-win-bind="innerText:change Converters.BeginChange" class="change"></div>
<div data-win-bind="innerText:change Converters.EndValue" class="changeEnd"></div>
<div data-win-bind="innerText:changePercent Converters.BeginChangePercent" class="changePercent"></div>
<div data-win-bind="innerText:changePercent Converters.EndValue" class="changePercentEnd"></div>
</div>
</div>
The issue is when I meet the very long name I need to adjust font-size.
So I do (for each element in list):
JavaScript:
template = document.getElementById('ItemTemplate');
// Adjust font - size
var name = item.data.Info.longName;
// Split by words
var parts = name.split(' ');
// Count words
var count = parts.filter(function(value) {
return value !== undefined;
}).length;
var longNameDiv = $(template).children("div").children("div").eq(4);
if (count > 2) {
// Display very long names correctly
$(longNameDiv).removeClass();
$(longNameDiv).addClass("veryLongName");
}
var rootDiv = document.createElement('div');
template.winControl.render(item.data, rootDiv);
return rootDiv;
CSS:
.veryLongName {
font-size: 10pt;
}
But it doesn't effect selectivly. Moreover seems like it is check conditions for the first time and then just apply the same setting for remaining items. But it needs to change font-size to smaller only in case if the name is too long. So what am I doing wrong? Thanks.
Try by using following code instead, but u must include jquery for it.
jsfiddle : http://jsfiddle.net/vH6G8/
You can do this using jquery's filter
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 5);
}).addClass('more_than5');
$(".ItemTemplate > div").filter(function(){
return ($(this).text().length > 10);
}).removeClass('more_than5').addClass('more_than10');
DEMO